VantUI做倒计时+环形进度条

本来想用VantUI做倒计时+环形进度条，在优快云搜了搜，没有我想要的答案，我就自己做了一个。
话不多说，上效果：

在上代码：
在template标签下的：

<van-cell  >
    <template >
        <span>
   <van-count-down :time="time" format="mm 分ss" />
        </span>
      <van-tag type="danger">标签</van-tag>
    </template>
    <template #title>
      <span class="custom-title">充电剩余时长</span>
    </template>
  </van-cell>
<!--  充电时长环形进度-->
  <van-circle
    v-model="currentRate"
    :rate="time"
    :speed="100/(this.time/1000)"//注意，在这里操作很经典，因为Vantui是以毫秒做单位的，
    //所以要在这里除以1000，方可转化为分钟，再去计算对于环形进度条的百分比，
    //当然，我现在是以分钟为单位的，当你使用其他的最为时间为单位的，再令换算，在这里我就不做示例了
    :text="text"
    :stroke-width="190"
  />
  

在script标签中

    export default {
       
      data() {
          return {
            time:3000987,//此处的时间是代表多少毫秒
            currentRate: 0,
          }
      },
      computed: {
        text() {
          return '已充' + this.currentRate.toFixed(1) + '%';
          //在这里返回的是环形进度条中间的文字加上百分比
        },
      },
     
    }

结尾:
代码部分不能直接复制粘贴，因为我的注释有些是不符合规范的，之所以这么做，是因为这样好解释代码。