Progress进度条组件实现对半劈效果并且自定义文本居中

element ui中Progress进度条组件实现对半劈效果并且自定义文本居中，如图所示：

Progress进度条自定义文本依据如下：

参数	说明	类型
format	指定进度条文字内容	function(percentage)

Progress进度条实现对半劈效果依据如下：

1. 第一步进度设置100%
2. 第二步借助过渡效果实现进度对半劈

---

具体实现：

<el-progress :text-inside="true" //进度条内部的文本显示
             :show-text="true" //进度条显示文本
             :stroke-width="24"
             :format="setItemText(scope.row.statusAndDays)" //自定义文本
             :percentage="100" //进度100%
             class="color1"  //设置过度颜色、文本居中
             v-if="scope.row.statusAndDays.userStatus=='延期'"
></el-progress>

• methods中定义存放组件内的方法setItemText实现自定义文本如下图所示：

 

methods:{

setItemText(row) {
  return () => {
    return row.days   //根据个人需求自定义返回数据
  }
}

}

• 实现进度对半劈 ，文本居中

.color1 .el-progress-bar__inner {
  text-align: center;
  background-color: unset;
  background-image: linear-gradient(to right, white ,white ,red);
}

 完结