【element-ui】el-progress 前端自定义进度条-Toy模板网

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

去年写了一篇antd-design-vue的自定义进度条，现在记录下element-ui的自定义进度条

效果如下，实现方式都是以弹窗的形式打开

【element-ui】el-progress 前端自定义进度条
1、给按钮绑事件

  <el-button
            style="height: 23px"   
            @click="checkBack(scope.row)"
            type="text"
            >撤回
          </el-button>

2、弹窗内加进度条，text-inside将进度条描述置于进度条内部，stroke-width 进度条的宽度，单位 px，percentage 百分比（必填）

<!--进度条 -->
    <el-dialog
      :title="operaScheduleTitle"
      :visible.sync="operaScheduleDialog"
      width="30%"
      left
    >
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="percentage"
      ></el-progress>
    </el-dialog>

3、data中定义需要的变量

 operaScheduleDialog: false,
operaScheduleTitle: "撤回中，请耐心等待！",
 percentage: 0,

4、按钮事件

  checkBack(row) {
  
        if (!this.submitIds.length) {
          this.$message.warning("请先选择需要撤回的单据！");
          return;
        }
        obj = { id: this.submitIds };
    
      //打开进度条弹窗
      this.operaScheduleDialog = true;
      this.percentage = 0;     
      //调接口，启动定时器，接口获取完，销毁定时器
      BackPlan(obj, (process) => {
      //创建定时器，实现进度条
        this.increaseTimer();
      })
        .then((res) => {
          this.increaseTimerEnd();
          this.msgSuccess("撤回成功");
          this.getList();
        })
        .catch((err) => {
          this.operaScheduleDialog = false;
        });
    },

5、计时器相关事件文章来源地址https://www.toymoban.com/news/detail-502251.html

    increaseTimer() {
      var that = this;
      that.timeStart = setInterval(function () {
        if (that.percentage < 90) {
          that.percentage += 5;
        }
        if (that.percentage > 100) {
          that.percentage = 100;
        }
      }, 300);
    },

    increaseTimerEnd() {
      var that = this;
      that.percentage = 100;
      that.operaScheduleDialog = false;
      clearInterval(this.timeStart);
    },