Vue+Element UI el-progress进度条内显示自定义数字及文字_el-progress 在中间展示两行字

需求

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

数据

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

1
2
3
4
5
6
7
8
9

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

代码

    <div class="pick">
        <div class="proItem warmPk">
            <el-progress
             :text-inside="true"
             :stroke-width="20"
             :show-text="true"
             :percentage="warmPer"
             :format="format(warmNum)"
             color="#fff"></el-progress>
             <div class="pro-num proTwoBK">{{ warmPer }}%</div>
         </div>
         <div class="proItem rePick">
             <el-progress
             :text-inside="true"
             :show-text="true"
             :stroke-width="20"
             :percentage="rePer"
             :format="format(reNum)"
             color="#fff"></el-progress>
         <div class="pro-num proBK">{{ rePer }}%</div>
      </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

js方法

  format(row) {
      return () => {
        return row ? row : 0;
      };
    },
1
2
3
4
5

css样式代码

   .pick {
        margin-top: 1vh;

        .proItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 1.5vh;
            width: 100%;
        }

        .pro-num {
            font-weight: 700;
            font-size: 1.9vh;
            width: 19%;
        }

        .proBK {
            color: #40E9FF;
        }

        .proTwoBK {
            color: #F57A47
        }



        .warmPk {
            ::v-deep.el-progress-bar__inner {

                background: #F67700 !important;
            }
        }

        .rePick {
            margin-top: 1.3vh;

            ::v-deep.el-progress-bar__inner {
                background: #49AAE5 !important;
            }
        }

        ::v-deep.el-progress-bar__outer {
            background: #353536 !important;
        }

        ::v-deep.el-progress-bar {
            width: 100% !important;

        }

        ::v-deep.el-progress-bar__inner {
            border-radius:10px !important;
        }

        ::v-deep.el-progress {
            text-align: center !important;
            width: 81% !important
        }

        ::v-deep.el-progress-bar__innerText {
            font-size: 1.4vh !important;
            font-weight: 700 !important;
            color: #fff !important;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

2.使用插槽

<template>
  <el-progress
    :percentage="50"
    :stroke-width="26"
    text-inside
    :format="formatText"
  >
    <template #text>
      <span>自定义文字</span>
    </template>
  </el-progress>
</template>
 
<script>
export default {
  methods: {
    formatText(percentage) {
      // 如果需要，可以在这里根据percentage值来动态显示文字
      return `${percentage}% 自定义文字`;
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23