Vant 组件中的 Circle 环形进度条

背景

最近在做移动端录音功能的开发，根据需求要求，在用户点击开始录音按钮的时候，会出现一个环形进度条，且环形进度条会根据录音时长的增加逐渐增加，当用户暂停录音时，环形进度条也停止增加，在该次项目开发中，我使用的是 Vant 组件中的环形进度条，具体实现的代码，如下：

原理

根据 Vant 组件中 circle 用法介绍，rate 属性表示进度条的目标进度，当 rate 发生变化时，v-model 会以 speed 的速度变化，直至达到 rate 设定的值。那么在实现进度条动态变化时，就可以将 rate 和一个动态变化的值绑定，我这里录音时间就是一个变化的值，故，将 rate 和录音时间绑定在一起。

效果图

 HTML

<template>
<div>
  <div @click="suspendFn">
    <van-circle
      v-model="currentRate"
      :stroke-width="50"
      :rate="rate"
      :speed="80"
      size="2.2rem"
      color="#0DA082"
      layer-color="none"
    >
    </van-circle>
  </div>
  <img src="../../... alt="开始录音背景图" @click="startRecordFn" />
</div>
</template>

 JS

<script>
  export default {
    data() {
      currentRate: 0,
      rate: 0,
      timer:null,
      second: 0,
      minute: 0
    },
    methods: {
     // 开始录音
        startRecordFn() {
          this.countTimeFn()
        },
     // 暂停录音
        suspendFn() {
          clearInterval(this.timer)
        },
     // 计时器
      countTimeFn() {
        let _this = this;
        this.timer = setInterval(function() {
          _this.second ++;
          if(_this.second % 60 === 0) {
            _this.minute ++;
            _this.second = 0;
          }
          // 进度条动态增加、暂停的原理：环形进度条的变化是受 rate 的影响，当环形进度条100%时 rate = 100，将 rate 与时间绑定到一起，就实现进度条随着时间的增加而增加，当暂停时，清楚计时器，此时 rate 也停止变化，进度条也就停止增加
          _this.rate = ((_this.minute * 60 + _this.second)/3).toFixed(1);
        },1000)
      },
    }
  }
</script>