From da72797328471d6ce8d5551ea37ac0472ce80a64 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Sun, 22 Jun 2025 19:41:45 +0800
Subject: [PATCH] fix(Progress): width overflow (#13519)

---
 packages/vant/src/progress/Progress.tsx   | 10 +++++++---
 packages/vant/src/progress/demo/index.vue |  6 ++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/progress/Progress.tsx b/packages/vant/src/progress/Progress.tsx
index 890a89765..07f9aaff7 100644
--- a/packages/vant/src/progress/Progress.tsx
+++ b/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,
       };
 
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index b838e8c3e..9407baae5 100644
--- a/packages/vant/src/progress/demo/index.vue
+++ b/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>