fix(Progress): fix render error when use v-show and improve performance

src/progress/Progress.tsx

@@ -1,15 +1,5 @@
-import {
-  ref,
-  watch,
-  computed,
-  nextTick,
-  reactive,
-  onMounted,
-  defineComponent,
-  ExtractPropTypes,
-} from 'vue';
+import { computed, defineComponent, ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace, addUnit } from '../utils';
-import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('progress');
 
@@ -36,67 +26,56 @@ export default defineComponent({
   props,
 
   setup(props) {
-    const root = ref<HTMLElement>();
-    const pivotRef = ref<HTMLElement>();
-
-    const state = reactive({
-      rootWidth: 0,
-      pivotWidth: 0,
-    });
-
     const background = computed(() =>
       props.inactive ? '#cacaca' : props.color
     );
 
-    const resize = () => {
-      nextTick(() => {
-        state.rootWidth = root.value ? root.value.offsetWidth : 0;
-        state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
-      });
-    };
+    const scaleX = computed(() => +props.percentage! / 100);
+    const translateX = computed(() => {
+      let offset = 0;
+      if (+props.percentage! !== 0) {
+        offset = (100 - +props.percentage!) / 2 / (+props.percentage! / 100);
+      }
+      return `${offset}%`;
+    });
 
     const renderPivot = () => {
-      const { rootWidth, pivotWidth } = state;
       const { textColor, pivotText, pivotColor, percentage } = props;
       const text = pivotText ?? `${percentage}%`;
       const show = props.showPivot && text;
 
       if (show) {
-        const left = ((rootWidth - pivotWidth) * +percentage!) / 100;
         const style = {
           color: textColor,
-          left: `${left}px`,
+          left: `${+percentage!}%`,
+          transform: `translate(-${+percentage!}%,-50%)`,
           background: pivotColor || background.value,
         };
 
         return (
-          <span ref={pivotRef} style={style} class={bem('pivot')}>
+          <span style={style} class={bem('pivot')}>
             {text}
           </span>
         );
       }
     };
 
-    watch(() => [props.showPivot, props.pivotText], resize);
-    onMounted(resize);
-    useExpose({ resize });
-
     return () => {
-      const { trackColor, percentage, strokeWidth } = props;
+      const { trackColor, strokeWidth } = props;
       const rootStyle = {
         background: trackColor,
         height: addUnit(strokeWidth),
       };
       const portionStyle = {
         background: background.value,
-        width: (state.rootWidth * +percentage!) / 100 + 'px',
+        width: '100%',
+        transform: `scaleX(${scaleX.value}) translateX(-${translateX.value})`,
       };
 
       return (
-        <div ref={root} class={bem()} style={rootStyle}>
-          <span class={bem('portion')} style={portionStyle}>
-            {renderPivot()}
-          </span>
+        <div class={bem()} style={rootStyle}>
+          <span class={bem('portion')} style={portionStyle}></span>
+          {renderPivot()}
         </div>
       );
     };