fix(progress): resolve issue #1138 (#1141)

src/packages/__VUE/progress/index.scss

@@ -14,7 +14,7 @@
       background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
-      position: relative;
+      // position: relative;
       .nut-progress-text {
         display: flex;
         flex-direction: column;
@@ -54,7 +54,8 @@
         font-size: $progress-small-text-font-size;
         line-height: $progress-small-text-line-height;
         padding: $progress-small-text-padding;
-        top: $progress-small-text-top;
+        // top: $progress-small-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-base {
@@ -63,7 +64,7 @@
         font-size: $progress-base-text-font-size;
         line-height: $progress-base-text-line-height;
         padding: $progress-base-text-padding;
-        top: $progress-base-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-large {
@@ -72,7 +73,7 @@
         font-size: $progress-large-text-font-size;
         line-height: $progress-large-text-line-height;
         padding: $progress-large-text-padding;
-        top: $progress-large-text-top;
+        top: 50%;
       }
     }
   }
@@ -91,7 +92,7 @@
     border-radius: $progress-insidetext-border-radius;
     position: absolute;
     transition: all 0.4s;
-    top: -42%;
+    top: 50%;
     min-width: 0px;
   }
   .nut-icon-success,

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

@@ -12,7 +12,7 @@
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
           :id="'nut-progress-insidetext-taro-' + randRef"
-          :style="{ lineHeight: height, left: left }"
+          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
@@ -87,7 +87,6 @@ export default create({
   setup(props, { emit }) {
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref<any>();
-    const left = ref();
     const insideText = ref();
     const refRandomId = Math.random().toString(36).slice(-8);
     const randRef = ref(refRandomId);
@@ -102,49 +101,15 @@ export default create({
         color: props.textColor || ''
       };
     });
-    const slideLeft = async (values: string | number) => {
-      if (Taro.getEnv() === 'WEB') {
-        if (!props.textInside) return;
-        let offsetWidth = progressOuter.value.offsetWidth;
-        let percentageWidth = progressOuter.value.offsetWidth * Number(values) * 0.01;
-        let insideTextWidth = insideText.value.offsetWidth;
-        left.value = percentageWidth - 5 + 'px';
-        if (offsetWidth == percentageWidth) {
-          left.value = percentageWidth - insideTextWidth + 'px';
-        }
-      } else {
-        if (!props.textInside) return;
-        const query = Taro.createSelectorQuery() as any;
-        query.select('#nut-progress-outer-taro-' + randRef.value).boundingClientRect();
-        query.select('#nut-progress-insidetext-taro-' + randRef.value).boundingClientRect();
-        query.exec((res: any) => {
-          let offsetWidth = res[0].width;
-          let percentageWidth = res[0].width * Number(values) * 0.01;
-          let insideTextWidth = res[1].width;
-          left.value = percentageWidth - 4 + 'px';
-          if (offsetWidth == percentageWidth) {
-            left.value = percentageWidth - insideTextWidth + 'px';
-          }
-        });
-      }
-    };
-    watch(
-      () => props.percentage,
-      (values) => {
-        slideLeft(values);
-      }
-    );
+
     onMounted(() => {
-      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {
-        slideLeft(props.percentage);
-      });
+      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
     });
     return {
       height,
       bgStyle,
       textStyle,
       progressOuter,
-      left,
       insideText,
       randRef
     };

src/packages/__VUE/progress/index.vue

@@ -10,7 +10,7 @@
         <div
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
-          :style="{ lineHeight: height, left: left }"
+          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
@@ -85,7 +85,6 @@ export default create({
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref();
     const insideText = ref();
-    const left = ref();
     const bgStyle = computed(() => {
       return {
         width: props.percentage + '%',
@@ -97,35 +96,13 @@ export default create({
         color: props.textColor || ''
       };
     });
-
-    const slideLeft = (values: string | number) => {
-      if (props.textInside) {
-        let offsetWidth = progressOuter.value.offsetWidth;
-        let percentageWidth = progressOuter.value.offsetWidth * Number(values) * 0.01;
-        let insideTextWidth = insideText.value.offsetWidth;
-        left.value = percentageWidth - 5 + 'px';
-        if (offsetWidth == percentageWidth) {
-          left.value = percentageWidth - insideTextWidth + 'px';
-        }
-      }
-    };
-
-    watch(
-      () => props.percentage,
-      (values) => {
-        slideLeft(values);
-      }
-    );
-    onMounted(() => {
-      slideLeft(props.percentage);
-    });
+    onMounted(() => {});
     return {
       height,
       bgStyle,
       textStyle,
       progressOuter,
-      insideText,
-      left
+      insideText
     };
   }
 });