关于javascript: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>