VUE3 Ant Design中Progress实现环形进度条内文字自定义样式

AAA杀鱼都师傅

已于 2024-09-06 15:41:00 修改

阅读量707

点赞数 3

分类专栏：前端文章标签：前端 anti-design-vue jeecgboot vue

于 2024-09-06 15:18:31 首次发布

本文链接：https://blog.csdn.net/zhujin1196/article/details/141959880

版权

VUE3 Ant Design中Progress实现环形进度条和进度条内文字自定义样式

可以在Progress中添加一个template，然后#format=“percent”：这定义了一个具名插槽，名为format。当使用这个具名插槽时，可以通过percent参数接收一个值，这个值与进度条的百分比相关。具体实现方式如下：

<!--  
size:进度条的尺寸可以是数字也可以是| "small" | "default"
type:类型，可选 line circle dashboard ,这里使用的圆形
percent:百分比 
showInfo:是否显示进度数值或状态图标
strokeColor: 进度条的色彩
strokeLinecap:进度条的样式,环的样式
 -->
<Progress
              type="circle"
              :strokeWidth="10"
              :size="180"
              :percent="progressPercent"
              :showInfo="true"
              :strokeColor="conicColors"
              strokeLinecap="square">
              <!--  环内文字展示！！！&#