本来想用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) + '%';
//在这里返回的是环形进度条中间的文字加上百分比
},
},
}
结尾:
代码部分不能直接复制粘贴,因为我的注释有些是不符合规范的,之所以这么做,是因为这样好解释代码。