vue3 ant-design-vue progress format 只能传percent值吗
时间: 2023-08-14 13:04:58 浏览: 143
ant-design-vue3-admin:一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板,支持响应式布局,在 PC、平板和手机上均可使用
3星 · 编辑精心推荐
不完全是,`<a-progress>` 组件的 `percent` 属性确实只能接收数字类型的百分比值,但你可以通过 `format` 插槽自定义进度条的内容。下面是一个示例:
```html
<template>
<div>
<a-progress :percent="50">
<template #format>{{ customFormat }}</template>
</a-progress>
</div>
</template>
<script>
export default {
computed: {
customFormat() {
return `${this.percent}% Custom Text`
},
},
}
</script>
```
这里我们使用了 `format` 插槽来定义自定义格式的进度条内容。在插槽中,我们渲染了一个计算属性 `customFormat`,它将百分比值与自定义文本一起显示。
注意: `format` 插槽的优先级比 `percent` 属性高,因此如果你同时使用了这两个属性,插槽中的内容将覆盖 `percent` 属性的默认显示。
阅读全文