Element Progress 进度条文字样式实现

原创于 2023-06-21 16:11:50 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文展示了如何使用ElementUI的Progress组件创建一个圆形进度条，并定制文字样式，包括设置GPU利用率的显示方式和颜色。同时，提到了代码片的高亮设置，以及在CSS中对特定类的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element Progress 进度条文字样式实现

如图

在这里插入图片等等描述

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<el-progress
                      type="circle"
                      :width="140"
                      :stroke-width="15"
                      :format="gpuRateFormat"
                      class="gpuRateFormat"
                      :percentage="parseFloat(gpuRate < 0 ? 100 : gpuRate)"
                      color="#8AE7BA"
                    ></el-progress>

  gpuRateFormat(percentage){
      let text = "GPU利用率";
      return percentage + "%\n" ;
    }

::v-deep .gpuRateFormat .el-progress__text::after{
  content: "GPU利用率";
  font-size: 12px;
  font-weight: 400;
  color: #9C9AB3;
}