diff --git a/packages/vant/src/progress/Progress.tsx b/packages/vant/src/progress/Progress.tsx
index 07f9aaff7..2b53bea1b 100644
--- a/packages/vant/src/progress/Progress.tsx
+++ b/packages/vant/src/progress/Progress.tsx
@@ -32,7 +32,7 @@ export default defineComponent({
props: progressProps,
- setup(props) {
+ setup(props, { slots }) {
const background = computed(() =>
props.inactive ? undefined : props.color,
);
@@ -42,9 +42,9 @@ export default defineComponent({
const renderPivot = () => {
const { textColor, pivotText, pivotColor, percentage } = props;
const safePercentage = format(percentage);
- const text = pivotText ?? `${percentage}%`;
+ const text = pivotText ?? `${safePercentage}%`;
- if (props.showPivot && text) {
+ if (props.showPivot && (slots.pivot || text)) {
const style = {
color: textColor,
left: `${safePercentage}%`,
@@ -57,7 +57,7 @@ export default defineComponent({
style={style}
class={bem('pivot', { inactive: props.inactive })}
>
- {text}
+ {slots.pivot ? slots.pivot({ percentage: safePercentage }) : text}
);
}
diff --git a/packages/vant/src/progress/README.md b/packages/vant/src/progress/README.md
index 3bfb80a6c..8326e4d8a 100644
--- a/packages/vant/src/progress/README.md
+++ b/packages/vant/src/progress/README.md
@@ -53,6 +53,19 @@ Use `pivot-text` to custom text, use `color` to custom bar color.
/>
```
+### Custom Pivot Content
+
+Use `pivot` slot to custom the pivot content.
+
+```html
+
+
+
+ {{ percentage }}%
+
+
+```
+
## API
### Props
@@ -69,6 +82,12 @@ Use `pivot-text` to custom text, use `color` to custom bar color.
| inactive | Whether to be gray | _boolean_ | `false` |
| show-pivot | Whether to show text | _boolean_ | `true` |
+### Slots
+
+| Name | Description | SlotProps |
+| ----- | -------------------- | ------------------------ |
+| pivot | Custom pivot content | _{ percentage: number }_ |
+
### Types
The component exports the following type definitions:
diff --git a/packages/vant/src/progress/README.zh-CN.md b/packages/vant/src/progress/README.zh-CN.md
index 175448d40..8f03cadd9 100644
--- a/packages/vant/src/progress/README.zh-CN.md
+++ b/packages/vant/src/progress/README.zh-CN.md
@@ -57,6 +57,19 @@ app.use(Progress);
/>
```
+### 自定义插槽内容
+
+通过 `pivot` 插槽可以自定义进度文字的内容。
+
+```html
+
+
+
+ {{ percentage }}%
+
+
+```
+
## API
### Props
@@ -73,6 +86,12 @@ app.use(Progress);
| inactive | 是否置灰 | _boolean_ | `false` |
| show-pivot | 是否显示进度文字 | _boolean_ | `true` |
+### Slots
+
+| 名称 | 说明 | 参数 |
+| ----- | -------------- | ------------------------ |
+| pivot | 自定义进度文字 | _{ percentage: number }_ |
+
### 类型定义
组件导出以下类型定义:
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 9407baae5..173c8ea18 100644
--- a/packages/vant/src/progress/demo/index.vue
+++ b/packages/vant/src/progress/demo/index.vue
@@ -1,6 +1,7 @@