Rate 评分

引入

  1. import Vue from 'vue';
  2. import { Rate } from 'vant';
  3. Vue.use(Rate);

代码演示

基础用法

  1. <van-rate v-model="value" />
  1. export default {
  2. data() {
  3. return {
  4. value: 3
  5. };
  6. }
  7. }

自定义图标

  1. <van-rate
  2. v-model="value"
  3. icon="like"
  4. void-icon="like-o"
  5. />

自定义样式

  1. <van-rate
  2. v-model="value"
  3. :size="25"
  4. color="#ee0a24"
  5. void-icon="star"
  6. void-color="#eee"
  7. />

半星

  1. <van-rate
  2. v-model="value"
  3. allow-half
  4. void-icon="star"
  5. void-color="#eee"
  6. />
  1. export default {
  2. data() {
  3. return {
  4. value: 2.5
  5. };
  6. }
  7. }

自定义数量

  1. <van-rate v-model="value" :count="6" />

禁用状态

  1. <van-rate v-model="value" disabled />

只读状态

  1. <van-rate v-model="value" readonly />

API

Props

参数说明类型默认值
v-model当前分值number-
count图标总数number5
size图标大小,默认单位为pxstring | number20px
gutter图标间距,默认单位为pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
disabled-color禁用时的颜色string#bdbdbd
icon选中时的图标名称或图片链接,可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接,可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态booleanfalse
disabled是否禁用评分booleanfalse
touchable v2.2.0是否可以通过滑动手势选择评分booleantrue

Events

事件名说明回调参数
change当前分值变化时触发的事件当前分值

Rate 评分 - 图1