vue2组件系列第二十七节:Rate 评分

Rate评分我们经常在大众点评，电影，淘宝等等很多平台上看到过，虽然是个小组件，但是如果不封装起来每次每新写确实相当麻烦，Vant封装的这个组件相当简单好用，简单几行就搞定！腻害了！

准备工作：

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

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

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/rate')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Rate 评分</div>
 </van-col>
</a>

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

代码演示Rate评分：

简单二步就搞定：

<van-rate 
 v-model="value" 
/>
data() {
 return {
 value: 3
 }
},

二步就可以将Rate的默认样式显示出来！相当方便了。

当然，这个图标，还有其它样式，我们也是可以自定义的。我们改下它的图标(icon没有改成功)：

<van-rate 
 v-model="value" 
 :size="25"
 :count="5"
 color="red"
 void-color="#eee"
/>

count：图标的个数

color：图标的颜色

void-color：未选中图标的颜色

Rate评分还支持change事件，当Rate改变时，触发此事件：

onChange(value) {
 console.log(value)
},

有了Rate评份，我们再也不怕麻烦了！

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