From 8ac597dc3d2316d34f866dcfd7e1646c695da180 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 25 Aug 2021 17:22:09 +0800
Subject: [PATCH] fix(Progress): percentage missing default value
---
src/progress/Progress.tsx | 14 ++++++--------
1 file changed, 6 insertions(+), 8 deletions(-)
diff --git a/src/progress/Progress.tsx b/src/progress/Progress.tsx
index 4e4030143..2f0415151 100644
--- a/src/progress/Progress.tsx
+++ b/src/progress/Progress.tsx
@@ -14,6 +14,7 @@ const props = {
strokeWidth: [Number, String],
percentage: {
type: [Number, String],
+ default: 0,
validator: (value: number | string) => value >= 0 && value <= 100,
},
};
@@ -30,18 +31,15 @@ export default defineComponent({
props.inactive ? '#cacaca' : props.color
);
- const scaleX = computed(() => +props.percentage! / 100);
-
const renderPivot = () => {
const { textColor, pivotText, pivotColor, percentage } = props;
const text = pivotText ?? `${percentage}%`;
- const show = props.showPivot && text;
- if (show) {
+ if (props.showPivot && text) {
const style = {
color: textColor,
- left: `${+percentage!}%`,
- transform: `translate(-${+percentage!}%,-50%)`,
+ left: `${+percentage}%`,
+ transform: `translate(-${+percentage}%,-50%)`,
background: pivotColor || background.value,
};
@@ -54,14 +52,14 @@ export default defineComponent({
};
return () => {
- const { trackColor, strokeWidth } = props;
+ const { trackColor, percentage, strokeWidth } = props;
const rootStyle = {
background: trackColor,
height: addUnit(strokeWidth),
};
const portionStyle = {
background: background.value,
- transform: `scaleX(${scaleX.value})`,
+ transform: `scaleX(${+percentage / 100})`,
};
return (