Vue前端开发-Vant之Rate 组件

Rate 组件常用于对事物评级使用，如商品的质量、用户对服务的满意度等各种评级功能实现，都离不开Rate组件的使用，该组件可以自定义显示的图标、数量和样式，还能显示半星的评分效果，当用户点击图标时，可以获取到最后的评分值。

Rate组件常用的属性如下表11-7所示。

接下来通过一个完整的案例来演示使用Rate组件实现的效果。

实例11-5 Rate组件

1. 功能描述

创建一个页面，添加多个van-rate组件，分别用于正常显示星状图标、自定义爱心图标、半星图标和自定义数量的图标。

2. 实现代码

在项目的components 文件夹中，添加一个名为“Rate”的.vue文件，该文件的保存路径是“components/ch11/form/”，在文件中加入如清单11-5所示代码。

代码清单11-5 Rate.vue代码

<template>
    <h3>Rate 组件</h3>
    <div class="row">
        <p>基础用法</p>
        <van-rate v-model="value" />
    </div>
    <div class="row">
        <p>自定义图标</p>
        <van-rate v-model="value" icon="like" 
	   void-icon="like-o" />
    </div>
    <div class="row">
        <p>半星</p>
        <van-rate v-model="value2" allow-half />
    </div>
    <div class="row">
        <p>自定义数量</p>
        <van-rate v-model="value" :count="6" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: 3,
            value2: 2.5
        }
    }
}
</script>
<style scoped>
.row {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: solid 1px #eee;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图11-7所示。

4. 源码分析

van-rate组件不仅可以显示各种状态和数量的评分，还可以绑定组件的change事件，当点评值发生变化后，触发该事件，在该事件中获取到currentValue值，即当前点评的最新值，可以将该值提交给相应接口，实现评分数据的保存功能。