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) + '%';
          //在这里返回的是环形进度条中间的文字加上百分比
        },
      },
     
    }

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值