element-ui中 Progress 圆形进度条自定义文字底色圆角文字颜色等修改-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui中 Progress 圆形进度条自定义文字底色圆角文字颜色等修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue中使用element-ui Progress 圆形进度条，自定义文字、底色、圆角、文字颜色等

element-ui中 Progress 圆形进度条自定义文字底色圆角文字颜色等修改

1.圆形进度条底色修改，非底色修改官方文档中有说明。deep:样式穿透

    /deep/ .el-progress-circle__track {
      stroke: #EEEEEE;
    }

2.圆角修改 stroke-linecap=“square” ,stroke-linecp有三个值，分别为butt/round/square，默认值为round圆角模式

        <el-progress type="circle"  :percentage="25" :stroke-width="8" 
         stroke-linecap="square" />

3.进度条中文字修改，有两种模式，如不需要添加复杂样式，可使用format属性自行添加样式

例：

  <el-progress type="circle"  :percentage="25" :stroke-width="8" 
     stroke-linecap="square"  :format="format" />

  methods: {
    format(percentage) {
      let tex = '2012MB'
      return percentage + '%\n' + tex
    },
  }

 /deep/ .el-progress__text {
      white-space: pre;//使百分号与所添加文字换行
 }

4.如果需要给文字添加不同样式，需自定义文本内容

例：样式使用的less，可自行转换文章来源地址https://www.toymoban.com/news/detail-507608.html

      <div class="circleBox">
        <el-progress type="circle" :show-text="false" :percentage="25" :stroke-width="8" 
        stroke-linecap="square" />
        <div class="textCenter">
          <div>80%</div>
          <span>2012MB</span>
        </div>
      </div>

    .circleBox {
      position: relative;
      text-align: center;
      width: 200px;
      margin: 40px 0;
      .circleCenter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        div {
          font-size: 26px;
          color: #1360FB;
          font-weight: 600;
          margin-bottom: 5px;
        }
        span {
          font-size: 14px;
          color: #999999;
        }
      }
    }