vue实现进度条倒计时（vant-ui）

van-count-down + van-progress 实现进度条倒计时效果

<!-- van-count-down: time 属性表示倒计时总时长，单位为毫秒 -->
<!-- van-progress 使用 percentage 属性来设置当前进度百分比 -->
<van-count-down use-slot ref="countDown" :time="time * 1000" @change="onTimeChange">
  <van-progress :show-pivot="false" color="#f2826a" :percentage="percentage" />
</van-count-down>

data(){
	return{
		percentage:100, // 进度百分比
		time:12 // 单位秒
	}
},
methods:{
	// 倒计时
    onTimeChange (e) {
      let { days, hours, minutes, seconds } = e
      // 时间换成成毫秒
      let totalMilliseconds = (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000
      let percentage = totalMilliseconds / (this.time * 1000) * 100
      this.percentage = percentage
    },
}