去年寫了一篇antd-design-vue的自定義進(jìn)度條，現(xiàn)在記錄下element-ui的自定義進(jìn)度條

效果如下，實現(xiàn)方式都是以彈窗的形式打開

1、給按鈕綁事件

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

2、彈窗內(nèi)加進(jìn)度條，text-inside將進(jìn)度條描述置于進(jìn)度條內(nèi)部，stroke-width 進(jìn)度條的寬度，單位 px，percentage 百分比（必填）

<!--進(jìn)度條 -->
    <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("請先選擇需要撤回的單據(jù)！");
          return;
        }
        obj = { id: this.submitIds };
    
      //打開進(jìn)度條彈窗
      this.operaScheduleDialog = true;
      this.percentage = 0;     
      //調(diào)接口，啟動定時器，接口獲取完，銷毀定時器
      BackPlan(obj, (process) => {
      //創(chuàng)建定時器，實現(xiàn)進(jìn)度條
        this.increaseTimer();
      })
        .then((res) => {
          this.increaseTimerEnd();
          this.msgSuccess("撤回成功");
          this.getList();
        })
        .catch((err) => {
          this.operaScheduleDialog = false;
        });
    },

5、計時器相關(guān)事件文章來源地址http://www.zghlxwxcb.cn/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);
    },

到了這里，關(guān)于【element-ui】el-progress 前端自定義進(jìn)度條的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！