Vue+Element UI el-progress进度条内显示自定义数字及文字

蓝胖子的多啦A梦

已于 2024-04-29 10:57:14 修改

阅读量4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js ui 前端

于 2024-04-29 10:46:04 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/138304285

需求

进度条内展示具体的数字值，进度条外展示 百分比数值

在这里插入图片描述

数据

data() {
   
   
    return {
   
   
      reNum: 3214,
      rePer:40,
      warmPer: 40,
      warmNum:2132,
  }
 }

因为样式要求，显示的百分数也是自己写的哈，没有用进度条自带的

代码

    <div class="pick">
        <div class="proItem warmPk">
            <el-progress
             :text-inside="true"
             :stroke-width="20"
             :show-text="true"
             :percentage="warmPer"
             :format="format(warmNum)"
             color