假的进度条

<template>
  <div>
    <a-progress :percent="format" status="active" />
  </div>
</template>
<script>
export default {
  computed: {
    woStr: (that) => JSON.stringify,
    format: (that) => parseInt(that.percent),
  },
  // pending //reject //resolve
  props: ["state", "interval"],
  data() {
    return {
      percent: 0,
      timer: null,
    };
  },
  methods: {
    restartFlow() {
      this.percent = 0;
      let timmeLine = 0;
      this.timer && clearInterval(this.timer);
      const p = Math.random() / 10;
      this.timer = setInterval(() => {
        timmeLine++;
        this.percent = (-1 / (p * timmeLine + 1) + 1) * 100;
      }, this.interval || 200);
    },
    rejectFlow() {
      this.percent = 100;
      this.timer && clearInterval(this.timer);
    },
    resolveFlow() {
      this.percent = 100;
      this.timer && clearInterval(this.timer);
    },
  },
  watch: {
    state: {
      handler(state) {
        switch (state) {
          case "pending":
            this.restartFlow();
            break;
          case "reject":
            this.rejectFlow();
            break;
          case "resolve":
            this.resolveFlow();
            break;
          default:
            throw new Error(
              'state must be one of "pending" "reject" "resolve"'
            );
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-progress-bg {
  transition: width 1000ms;
}
</style>