Circle环形进度条用在数据表中，可以直观地看到其进度，也可以用在时间的倒计时中等等。Vant提供的这个Circle环形进度条，还会有动画效果，体验非常好。
准备工作：
- 创建一个页面: Circle.vue
- 在router.js里配置Circle页面的路由
{
path: '/circle',
name: 'circle',
component: () => import('./views/Circle.vue')
}
- 在index.vue里添加一项
<a href="javascript:void(0)" @click="$router.push('/circle')">
<van-col span="6" class="marb20">
<van-icon name="circle" />
<div>Circle 环形进度条</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了3个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示Circle 环形进度条：
基本方法：
<van-circle
v-model="currentRate"
:rate="50"
:text="text"
/>
computed: {
text() {
return this.currentRate.toFixed(0) + '%'
},
},
v-model: 当前进度。即在向目标进度过程中所展示的进度。
rate：目标进度。即我们最终想让其达到的进度。
text：在环形进度条中间显示的文字。
<van-circle v-model="currentRate" color="#13ce66" fill="#fff" size="120px" layer-color="#ebedf0" :text="text" :rate="rate" :speed="100" :clockwise="true" :stroke-width="60" />
不解释了，直接上图吧，更容易理解一些。clockwise是进度条动画的方向，是顺时针还是逆时针方向。
接下来我们做个小案例，看下Circle是如何交互的，另外看它是如何动画的。
<van-circle v-model="currentRate" color="#13ce66" fill="#eee" size="200px" layer-color="#ebedf0" :text="text" :rate="rate" :speed="100" :clockwise="true" :stroke-width="60" /> <van-button type="primary" @click="addText">增加</van-button> <van-button type="warning" @click="reduceText">减少</van-button>
增加2个按钮，一个是“增加”，一个是“减少”。当点击“增加”按钮时，rate都会增加20%，当点击“减少”按钮时，rate都会减少20%。
computed: {
text() {
return this.currentRate.toFixed(0) + '%'
},
},
methods: {
addText() {
this.rate += 20
},
reduceText() {
this.rate -= 20
},
goback() {
this.$router.go(-1)
}
},
其实就是改变rate值以及text的值。text值依赖于当前的进度，通过依赖this.currentRate.toFixed(0)获取到状态值。在交互时，我们可以看到进度条运动效果。
到目前为止呢，Cicle圆形进度条就演示完了！庆祝一下我们又学完一个组件啦！
今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油