blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Progress): percentage missing default value

Browse Source
This commit is contained in:
chenjiahan 2021-08-25 17:22:09 +08:00 committed by neverland
parent 49b4ffe7f0
commit 8ac597dc3d
1 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/progress/Progress.tsx
View File

@ -14,6 +14,7 @@ const props = {
strokeWidth: [Number, String], strokeWidth: [Number, String],
percentage: { percentage: {
type: [Number, String], type: [Number, String],
default: 0,
validator: (value: number | string) => value >= 0 && value <= 100, validator: (value: number | string) => value >= 0 && value <= 100,
}, },
}; };
@ -30,18 +31,15 @@ export default defineComponent({
props.inactive ? '#cacaca' : props.color props.inactive ? '#cacaca' : props.color
); );
const scaleX = computed(() => +props.percentage! / 100);
const renderPivot = () => { const renderPivot = () => {
const { textColor, pivotText, pivotColor, percentage } = props; const { textColor, pivotText, pivotColor, percentage } = props;
const text = pivotText ?? `${percentage}%`; const text = pivotText ?? `${percentage}%`;
const show = props.showPivot && text;
if (show) { if (props.showPivot && text) {
const style = { const style = {
color: textColor, color: textColor,
left: `${+percentage!}%`, left: `${+percentage}%`,
transform: `translate(-${+percentage!}%,-50%)`, transform: `translate(-${+percentage}%,-50%)`,
background: pivotColor || background.value, background: pivotColor || background.value,
}; };
@ -54,14 +52,14 @@ export default defineComponent({
}; };
return () => { return () => {
const { trackColor, strokeWidth } = props; const { trackColor, percentage, strokeWidth } = props;
const rootStyle = { const rootStyle = {
background: trackColor, background: trackColor,
height: addUnit(strokeWidth), height: addUnit(strokeWidth),
}; };
const portionStyle = { const portionStyle = {
background: background.value, background: background.value,
transform: `scaleX(${scaleX.value})`, transform: `scaleX(${+percentage / 100})`,
}; };
return ( return (