feat: progress 百分比不同尺寸样式增加

src/packages/__VUE/progress/demo.vue

@@ -39,14 +39,16 @@
     <p>线形进度条-自定义尺寸(内置"small","base","large"三种规格)</p>
     <div>
       <nut-cell>
-        <nut-progress percentage="30" size="small"> </nut-progress>
+        <nut-progress percentage="30" :text-inside="true" size="small">
+        </nut-progress>
       </nut-cell>
       <nut-cell>
         <nut-progress percentage="50" :text-inside="true" size="base">
         </nut-progress>
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="70" size="large"> </nut-progress>
+        <nut-progress percentage="70" :text-inside="true" size="large">
+        </nut-progress>
       </nut-cell>
     </div>
     <p>线形进度条-状态显示</p>

src/packages/__VUE/progress/doc.md

@@ -80,6 +80,6 @@ app.use(Progress);
 | show-text | 是否显示进度条文字内容 | Boolean | true
 | text-inside | 进度条文字显示位置(false:外显，true:内显) | Boolean | false
 | text-color | 进度条文字颜色设置 | String | #333
-| status | 进度条当前状态,active/icon(展示icon标签) | String | text
+| status | 进度条当前状态,active(展示动画效果)/icon(展示icon标签) | String | text
 | icon-name | icon名称 | String | checked
 | icon-color | icon颜色 | String | #439422

src/packages/__VUE/progress/index.scss

@@ -57,8 +57,10 @@
     &.nut-progress-small {
       height: 5px;
       .nut-progress-text {
-        font-size: 12px;
-        line-height: 12px;
+        font-size: 7px;
+        line-height: 10px;
+        padding: 2px 4px;
+        top: -100%;
       }
     }
     &.nut-progress-base {
@@ -69,10 +71,10 @@
       }
     }
     &.nut-progress-large {
-      height: 12px;
+      height: 15px;
       .nut-progress-text {
-        font-size: 20px;
-        line-height: 20px;
+        font-size: 13px;
+        line-height: 18px;
       }
     }
   }
@@ -89,6 +91,7 @@
     background: rgba(250, 44, 25, 1);
     border-radius: 5px;
     position: absolute;
+    transition: all 0.4s;
     top: -26%;
   }
   .nut-icon-success,

src/packages/__VUE/progress/index.taro.vue

@@ -30,7 +30,7 @@
       <template v-if="status == 'text' || status == 'active'">
         <span :style="textStyle">{{ percentage }}%</span>
       </template>
-      <template v-else-if="status == 'success' || 'wrong'">
+      <template v-else-if="status == 'icon'">
         <nut-icon size="16px" :name="iconName" :color="iconColor"></nut-icon>
       </template>
     </div>
@@ -45,10 +45,11 @@ import {
   reactive,
   nextTick,
   ref,
+  getCurrentInstance,
   watch
 } from 'vue';
 import { createComponent } from '../../utils/create';
-import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
+import Taro, { eventCenter } from '@tarojs/taro';
 const { create } = createComponent('progress');
 export default create({
   props: {
@@ -109,28 +110,32 @@ export default create({
         color: props.textColor || ''
       };
     });
-    const slideLeft = () => {
+    const slideLeft = async (values: String | Number) => {
       if (Taro.getEnv() === 'WEB') {
         left.value =
-          progressOuter.value.offsetWidth * Number(props.percentage) * 0.01 -
-          3 +
-          'px';
+          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
       } else {
         setTimeout(() => {
-          const query = Taro.createSelectorQuery();
+          const query = (Taro.createSelectorQuery() as any).in(
+            getCurrentInstance
+          );
           query
             .select('.nut-progress-outer')
             .boundingClientRect((rec: any) => {
-              left.value =
-                rec.width * Number(props.percentage) * 0.01 - 3 + 'px';
+              left.value = rec.width * Number(values) * 0.01 - 4 + 'px';
             })
             .exec();
         }, 200);
       }
     };
-    onMounted(() => {
-      slideLeft();
-    });
+    watch(
+      () => props.percentage,
+      (values) => {
+        slideLeft(values);
+      },
+      { immediate: true }
+    );
+    onMounted(() => {});
     return {
       height,
       bgStyle,

src/packages/__VUE/progress/index.vue

@@ -27,7 +27,7 @@
       :style="{ lineHeight: height }"
       v-if="showText && !textInside"
     >
-      <template v-if="status == 'active'">
+      <template v-if="status == 'active' || status == ''">
         <span :style="textStyle">{{ percentage }}%</span>
       </template>
       <template v-else-if="status == 'icon'">
@@ -108,10 +108,25 @@ export default create({
         color: props.textColor || ''
       };
     });
+
+    watch(
+      () => props.percentage,
+      (values) => {
+        console.log(
+          'progressOuter.value.offsetWidth',
+          progressOuter.value.offsetWidth
+        );
+
+        console.log('values', values);
+
+        left.value =
+          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+      }
+    );
     onMounted(() => {
       left.value =
         progressOuter.value.offsetWidth * Number(props.percentage) * 0.01 -
-        3 +
+        4 +
         'px';
     });
     return {