【Vue组件】计时进度条

需求描述：

显示操作进度条，超过n秒还未完成操作时，允许手动取消。

效果图：

实现：

<time-progress
        :visible.sync="progressVisible"
        :time="10"
        :percent="progressPercent"
        :text.sync="progressText"
        :finishedText.sync="progressFinishedText"
      ></time-progress>

<template>
  <el-dialog
    :visible.sync="progressDialogVisible"
    width="30%"
    class="search-progress-dialog"
    :show-close="ss <= 0"
    :before-close="handleCloseprogressDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p v-show="progressPercent != 100">{{ text }}</p>
    <p v-show="progressPercent == 100">{{ finishedText }}</p>
    <p>{{ progressPercent }}%</p>
    <el-progress :percentage="progressPercent" :show-text="false"></el-progress>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseprogressDialog" :disabled="ss > 0"
        >取 消<span v-show="ss > 0">({{ ss }}s)</span></el-button
      >
    </span>
  </el-dialog>
</template>

      <script>
export default {
  name: 'TimeProgress',
  props: {
    // 可视
    visible: {
      type: Boolean,
      default: false,
    },
    // 每次移动进度最大值
    max: {
      type: Number,
      default: 15,
    },
    // 每次移动进度最小值
    min: {
      type: Number,
      default: 10,
    },
    // 可取消计时时间
    time: {
      type: Number,
      default: 10,
    },
    // 进度
    percent: {
      type: Number,
      default: 0,
    },
    // 提示文本
    text: {
      type: String,
      default: '',
    },
    // 结束时提示文本
    finishedText: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      progressDialogVisible: false, //进度条展示
      progressPercent: 0, //进度
      counter: null, //计时器
      ss: 0, //秒数
    }
  },
  watch: {
    progressDialogVisible(val) {
      const t = this
      if (val) {
        t.progressPercent = t.percent
        // 1秒前进min-max的随机整数
        t.counter = setInterval(() => {
          let r = parseInt(Math.random() * (t.max - t.min + 1) + t.min, 10)
          if (t.progressPercent < 90 && t.progressPercent + r < 90) {
            t.progressPercent += r
          } else {
            t.progressPercent = 90
          }
          t.ss -= 1
        }, 1000)
      } else {
        clearTimeout(t.counter)
        t.counter = null
        t.ss = t.time
      }
    },
    visible(val) {
      this.progressDialogVisible = val
    },
    percent(val) {
      this.progressPercent = val
    },
  },
  created() {
    this.ss = this.time
  },
  methods: {
    handleCloseprogressDialog() {
      this.progressDialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.search-progress-dialog {
  /deep/ .el-dialog__header {
    margin: 0;
    border: 0;
    .el-dialog__headerbtn {
      top: 16px;
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0 0 16px 0;
    background: none;
    border: 0;
    text-align: center;
  }
}
</style>