fix(Progress): width overflow (#13519)

packages/vant/src/progress/Progress.tsx

@@ -37,15 +37,18 @@ export default defineComponent({
       props.inactive ? undefined : props.color,
     );
 
+    const format = (rate: Numeric) => Math.min(Math.max(+rate, 0), 100);
+
     const renderPivot = () => {
       const { textColor, pivotText, pivotColor, percentage } = props;
+      const safePercentage = format(percentage);
       const text = pivotText ?? `${percentage}%`;
 
       if (props.showPivot && text) {
         const style = {
           color: textColor,
-          left: `${+percentage}%`,
-          transform: `translate(-${+percentage}%,-50%)`,
+          left: `${safePercentage}%`,
+          transform: `translate(-${safePercentage}%,-50%)`,
           background: pivotColor || background.value,
         };
 
@@ -62,12 +65,13 @@ export default defineComponent({
 
     return () => {
       const { trackColor, percentage, strokeWidth } = props;
+      const safePercentage = format(percentage);
       const rootStyle = {
         background: trackColor,
         height: addUnit(strokeWidth),
       };
       const portionStyle = {
-        width: `${percentage}%`,
+        width: `${safePercentage}%`,
         background: background.value,
       };
 

packages/vant/src/progress/demo/index.vue

@@ -21,14 +21,12 @@ const t = useTranslate({
 
 const percentage = ref(50);
 
-const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
-
 const add = () => {
-  percentage.value = format(percentage.value + 20);
+  percentage.value = percentage.value + 20;
 };
 
 const reduce = () => {
-  percentage.value = format(percentage.value - 20);
+  percentage.value = percentage.value - 20;
 };
 </script>