Circle 环形进度条

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/circle

用于展示进度. inline-block 元素, 布局需要配合其他元素使用.

它是第一个用于展示进度, 以及到达动画的组件. 目的是有一个动效.

基本用法: rate 控制进度条目标进度, v-model:current-rate 用于绑定当前进度值. 当发生变化是, 组件样式会以 speed 的速度到达目标给定值. 使用 text 控制中间显示的文本.

这个组件的目的是使用 rate 表示当前的进度 (默认到达 100 为完满整个圆), 而 v-model:current-rate 是用于定义当前 rate 的起点值, 目的是为了显示动画.

一个演示

<van-circle 
            v-model:current-rate="rateValue" 
            v-model:rate="rate" 
            :speed="100" 
            :text="rate">
</van-circle>

<van-button @click="rateValue -= 20">
  减少 起点 ({{ rateValue }})
</van-button>
<van-button @click="rate += 20">
  增加 终点 ({{ rate }})
</van-button>