Vue - 根据倒数计时器提前设置引导5进度条宽度

Question

我想使用 bootstrap 5 进度条来显示倒计时的剩余时间。我已经在我的 vuejs 组件模板中创建了所需的标记

          <div class="progress">
            <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              {{ minutes }} seconds
            </div>
          </div>

在我的方法中，我有这两个功能，一个是开始倒计时，另一个是在分钟到零时停止倒计时。

    startTimer(){
      this.$refs.elaspedTime.width = '0%';
      this.countdown = setInterval( () => {
        this.minutes--;
        if( this.$refs.elaspedTime.width < '100%' ){
          this.$refs.elaspedTime.width += '0.6%';
        }
        if( this.minutes === 0 ){
          this.stopTimer();
        }
      },1000);
    },
    stopTimer(){
      clearInterval(this.countdown);
    }

如何根据已过的倒计时分钟更改进度条宽度直到达到 100%？

Answer 1

你可以做这样的事情......

new Vue({
    el: "#app",
    data: () => ({
        minutes: 10,
        countdown: null
    }),
    methods: {
        startTimer(){
          let seconds = this.minutes // initial time
          let et = this.$refs.elaspedTime
          et.style.width = '0%'
          this.countdown = setInterval(() => {
            this.minutes--;
            et.style.width = ((seconds - this.minutes) * 100)/seconds + '%'
            if(this.minutes === 0){
              this.stopTimer();
            }
          },1000);
        },
        stopTimer(){
          clearInterval(this.countdown);
        }
    },
})

Demo

---

另见：Using Bootstrap 5 with Vue