progress codereview 问题修改

package.json

@@ -111,7 +111,7 @@
         "moment": "2.22.2",
         "node-filelist": "^1.0.0",
         "node-notifier": "5.2.1",
-        "node-sass": "4.9.3",
+        "node-sass": "4.13.1",
         "npm-run-all": "^4.1.5",
         "nyc": "10.0.0",
         "offline-plugin": "^5.0.6",

src/packages/progress/demo.vue

@@ -5,7 +5,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="30" stroke-color="#8e71c7"/>
+          <nut-progress percentage="30" stroke-color="pink" text-color="red"/>
         </span>
       </nut-cell>
     </div>
@@ -13,7 +13,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :show-text="false" stroke-width="24"/>
+          <nut-progress percentage="50" :show-text="false" stroke-height="24"/>
         </span>
       </nut-cell>
     </div>
@@ -72,12 +72,12 @@
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong"/>
+          <nut-progress percentage="50" :stroke-height="strokeHeight" status="wrong"/>
         </span>
       </nut-cell>
       <nut-cell>
         <span slot="title">
-          <nut-progress percentage="100" stroke-color="#1890ff" stroke-width="15" status="success"/>
+          <nut-progress percentage="100" stroke-color="#1890ff" stroke-height="15" status="success"/>
         </span>
       </nut-cell>
     </div>
@@ -103,7 +103,7 @@ export default {
   data() {
     return {
       val: 0,
-      strokeWidth:15,
+      strokeHeight:15,
       size:'small'
     };
   },

src/packages/progress/doc.md

@@ -16,7 +16,7 @@
 <nut-progress
     percentage="30"
     stroke-color="#8e71c7" 
-    stroke-width="12"
+    stroke-height="12"
 >
 </nut-progress>
 ```
@@ -35,7 +35,7 @@
 <nut-progress 
     percentage="60" 
     :text-inside="true" 
-    stroke-width="24"
+    stroke-height="24"
 ></nut-progress>
 ```
 设置状态显示
@@ -50,13 +50,13 @@
 <nut-progress 
     percentage="50"
     stroke-color="#f30"
-    stroke-width="15"
+    stroke-height="15"
     status="wrong"
 >
 </nut-progress>
 <nut-progress 
     percentage="100" 
-    :stroke-width="15" 
+    :stroke-height="15" 
     status="success"
 >
 </nut-progress>
@@ -85,9 +85,9 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | percentage | 百分比 | Number | 0
-| stroke-color | 进度条背景色 | String | #1890ff
-| stroke-width | 进度条高度 | String | ''
+| stroke-color | 进度条背景色 | String | #f30
+| stroke-height | 进度条宽度 | String | ''
 | size | 进度条及文字尺寸，可选值small/base/large | String | -
 | show-text | 是否显示进度条文字内容 | Boolean | true
-| text-inside | 进度条文字显示位置 | Boolean | false
+| text-inside | 进度条文字显示位置(false:外显，true:内显) | Boolean | false
 | status | 进度条当前状态,可选值text/active/wrong/success | String | text

src/packages/progress/progress.scss

@@ -78,17 +78,16 @@
         font-size: 12px;
         line-height: 1;
     }
-    .nut-icon-success {
+    .nut-icon-success,.nut-icon-fail {
         width: 10px;
         height: 10px;
         display: inline-block;
+    }
+    .nut-icon-success {
         background: url('#{$assetsPath}/img/success.png') no-repeat;
         background-size: cover;
     }
     .nut-icon-fail {
-        width: 10px;
-        height: 10px;
-        display: inline-block;
         background: url('#{$assetsPath}/img/wrong.png') no-repeat;
         background-size: cover;
     }

src/packages/progress/progress.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="nut-progress">
-        <div class="nut-progress-outer" :class="[showText && !textInside ? 'nut-progress-outer-part' :'','nut-progress-'+size]" :style="{height: strokeWidth + 'px'}">
+        <div class="nut-progress-outer" :class="[showText && !textInside ? 'nut-progress-outer-part' :'','nut-progress-'+size]" :style="{height: height}">
             <div :class="['nut-progress-inner',status=='active' ? 'nut-active' : '']" :style="bgStyle">
-                <div class="nut-progress-text" :style="{lineHeight:strokeWidth + 'px'}" v-if="showText && textInside"> {{percentage}}%</div>
+                <div class="nut-progress-text" :style="{lineHeight:height}" v-if="showText && textInside">  <span :style="textStyle">{{percentage}}%</span></div>
             </div>
         </div>
-        <div class="nut-progress-text" :style="{lineHeight:strokeWidth + 'px'}" v-if="showText && !textInside">
+        <div class="nut-progress-text" :style="{lineHeight:height}" v-if="showText && !textInside">
             <slot>
                 <template v-if="status=='text' || status=='active'" >
-                     {{percentage}}%
+                     <span :style="textStyle">{{percentage}}%</span>
                 </template>
                 <template v-else-if="status=='success' || 'wrong'">
                     <i :class="statusIcon"></i>
@@ -35,7 +35,7 @@ export default {
             type: String,
             default: 'text'
         },
-        strokeWidth: {
+        strokeHeight: {
             type:[Number,String],
             default: ''
         },
@@ -50,25 +50,32 @@ export default {
         strokeColor: {
             type: String,
             default: ''
+        },
+        textColor: {
+            tyep: String,
+            default:''
         }
     },
     data() {
         return {
-            currentStatus: this.status,
-        };
+            height:strokeHeight+'px'
+        }
     },
     computed:{
         bgStyle () {
-            const style = {};
-            style.width = this.percentage + '%';
-            style.backgroundColor = this.strokeColor || '';
-            return style;
+            return {
+                width:this.percentage + '%',
+                backgroundColor:this.strokeColor || ''
+            }
+        },
+        textStyle() {
+            return {
+                color:this.textColor || ''
+            }
         },
         statusIcon () {
             return  this.status==='success' ? 'nut-icon-success' :  this.status==='wrong' ? 'nut-icon-fail' : '';
         }
     },
-    methods: {
-    }
 }
 </script>