Auto Commit

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();
 }
 
 /**