【element-ui】el-progress 前端自定义进度条

最新推荐文章于 2024-08-20 08:00:00 发布

春晓_春眠花落

最新推荐文章于 2024-08-20 08:00:00 发布

阅读量3.6k

点赞数 1

分类专栏： js vue 文章标签：前端 ui vue.js

本文链接：https://blog.csdn.net/weixin_49668076/article/details/127754936

版权

vue 同时被 2 个专栏收录

46 篇文章 7 订阅

订阅专栏

27 篇文章 1 订阅

订阅专栏

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

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

在这里插入图片描述
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、计时器相关事件

    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);
    },