1

src/demo/progress.vue

@@ -3,11 +3,11 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-        <p>默认用法</p>
+        <h5>默认用法</h5>
         <nut-progress percent="15" />
-        <p>设置高度和颜色</p>
+        <h5>设置高度和颜色</h5>
         <nut-progress height="0.15rem" color="#F54C12" />
-        <p>显示进度数</p>
+        <h5>显示进度数</h5>
         <nut-progress percent="15" :showText="true" />
     </div>
 </template>

src/package/progress/src/progress.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="nut-progress">
-        <div class="nut-progress-cont" :style="{height}">
+        <div :class="['nut-progress-cont', showText !== 'out'? 'nut-progress-in': 'nut-progress-out']" :style="{height}">
             <div class="nut-progress-bar" :style="{background: color, width: per}">
-                <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText">{{per}}</div>
+                <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText !== 'out'">{{per}}</div>
             </div>
         </div>
+        <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText === 'out'">{{per}}</div>
     </div>
 </template>
 <script>
@@ -24,8 +25,8 @@ export default {
             default: '.06rem'
         },
         showText: {
-            type: Boolean,
-            default: false
+            type: String,
+            default: 'in'
         }
     },
     computed: {
@@ -66,6 +67,16 @@ export default {
     float: right;
     font-size: .14rem;
     color: #fff;
-    margin-right: 5px;
+}
+.nut-progress-in{
+    .nut-progress-text{
+        margin-right: 5px;
+    }
+}
+.nut-progress-out{
+    margin-right: 50px;
+    &+.nut-progress-text{
+        width: 50px;
+    }
 }
 </style>

src/view/progress.vue

@@ -3,15 +3,26 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-        <p>默认用法</p>
-        <nut-codebox code="<nut-progress percent='15' />" />
-        <nut-progress percent="15" />
-        <p>设置高度和颜色</p>
-        <nut-codebox code="<nut-progress height='0.15rem' color='#F54C12' />" />
-        <nut-progress height="0.15rem" color="#F54C12" />
-        <p>显示进度数</p>
-        <nut-codebox code="<nut-progress height='0.25rem' percent='20' :showText='true' />" />
-        <nut-progress percent="15" :showText="true" />
+        <h5>示例</h5>
+        <h6>默认用法</h6>
+        <nut-codebox code="<nut-progress 
+percent='15'
+height='10px' />" />
+        <div class="cont">
+          <nut-progress percent="15" height="10px" />
+        </div>
+        <h6>设置高度和颜色</h6>
+        <nut-codebox code="<nut-progress 
+height='10px' 
+color='#F54C12' />" />
+        <div class="cont">
+          <nut-progress height="10px" color="#F54C12" percent="23" />
+        </div>
+        <h6>显示进度数</h6>
+        <nut-codebox code="<nut-progress height='0.25rem' percent='20' showText='out' />" />
+        <div class="cont">
+          <nut-progress percent="20" showText="out" height="20px" />
+        </div>
     </div>
 </template>
 
@@ -26,5 +37,7 @@ export default {
 </script>
 
 <style>
-
+.cont{
+  width: 450px;
+}
 </style>