Circle环形进度条用在数据表中，可以直观地看到其进度，也可以用在时间的倒计时中等等。Vant提供的这个Circle环形进度条，还会有动画效果，体验非常好。

准备工作：

  1. 创建一个页面: Circle.vue
  2. 在router.js里配置Circle页面的路由

{ path: '/circle', name: 'circle', component: () => import('./views/Circle.vue') }

  1. 在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个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

vue怎么动态布局（vue2组件系列第三十三节）(1)

代码演示Circle 环形进度条：

基本方法：

<van-circle v-model="currentRate" :rate="50" :text="text" /> computed: { text() { return this.currentRate.toFixed(0) '%' }, },

vue怎么动态布局（vue2组件系列第三十三节）(2)

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是进度条动画的方向，是顺时针还是逆时针方向。

vue怎么动态布局（vue2组件系列第三十三节）(3)

接下来我们做个小案例，看下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)获取到状态值。在交互时，我们可以看到进度条运动效果。

vue怎么动态布局（vue2组件系列第三十三节）(4)

到目前为止呢，Cicle圆形进度条就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油

,