vue2组件系列第三十四节:Progress 进度条

准备工作：

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

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

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/progress')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Progress 进度条</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了31个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Progress进度条：

基础方法：

<van-progress
 :percentage="50"
/>

我们再看下其它的用法：

<van-progress
 :percentage="75"
 pivot-text="紫色"
 pivot-color="#7232dd"
 color="linear-gradient(to right, #be99ff, #7232dd)"
 />

说明直接上图来得更直接一些：

如果想做到有交互的效果的话，需要动太设置percentage即可。

到目前为止呢，Progress就演示完了！这节课是相当简的庆祝一下我们又学完一个组件啦！

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