diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue index a0d3d760a01dd8ebefcf50fde8c363afba94a81d..a8a7eedc505a00596c4a9ad40f2fac87b7bdcb59 100644 --- a/src/components/ProgressBar.vue +++ b/src/components/ProgressBar.vue @@ -38,6 +38,7 @@ * content?: string | number; // 自定义显示文本 * animation?: boolean; // 是否启用数字动画,默认 true * showPercentage?: boolean; // true显示百分比,false显示原始值,默认 true + * show?: boolean; // 是否显示文本,默认 true * } * } * @@ -83,6 +84,8 @@ interface ChartOptions { animation?: boolean; // 是否显示百分比(包括值和符号),默认 true showPercentage?: boolean; + // 是否显示文本,默认 true + show?: boolean; }; } @@ -102,7 +105,8 @@ const props = withDefaults(defineProps<{ size: null, color: '#333', font: 'Arial', - showPercentage: true + showPercentage: true, + show: true // 默认显示文本 } }) }) @@ -260,31 +264,32 @@ function startDraw(end: number, start?: number, dontClear?: boolean) { ctx.fill(); ctx.closePath(); - // 在绘制内圆之后添加文本绘制 - ctx.beginPath(); - ctx.font = `${fontSize.value}px ${props.options.text?.font || 'Arial'}`; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.fillStyle = props.options.text?.color || '#333'; - - // 处理显示文本 - let displayText: string; - if (props.options.text?.content !== undefined) { - displayText = String(props.options.text.content); - } else { - const maxValue = props.options.maxValue || 100; - const currentValue = currentDisplayNumber.value; - - if (props.options.text?.showPercentage !== false) { - const percentage = Math.round((currentValue / maxValue) * 100); - displayText = `${percentage}%`; + // 只在 show 为 true 时绘制文本 + if (props.options.text?.show !== false) { + ctx.beginPath(); + ctx.font = `${fontSize.value}px ${props.options.text?.font || 'Arial'}`; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillStyle = props.options.text?.color || '#333'; + + let displayText: string; + if (props.options.text?.content !== undefined) { + displayText = String(props.options.text.content); } else { - displayText = String(Math.round(currentValue)); + const maxValue = props.options.maxValue || 100; + const currentValue = currentDisplayNumber.value; + + if (props.options.text?.showPercentage !== false) { + const percentage = Math.round((currentValue / maxValue) * 100); + displayText = `${percentage}%`; + } else { + displayText = String(Math.round(currentValue)); + } } + + ctx.fillText(displayText, centerX, centerY); + ctx.closePath(); } - - ctx.fillText(displayText, centerX, centerY); - ctx.closePath(); } /**