• Rate 评分
    • 引入
  • 代码演示
    • 基础用法
    • 自定义图标
    • 自定义样式
    • 半星
    • 自定义数量
    • 禁用状态
    • 只读状态
  • API
    • Props
    • Events

    Rate 评分

    引入

    1. import { Rate } from 'vant';
    2. 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="#f44"
    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 | Number4px2.0.0
    color选中时的颜色String#ffd21e-
    void-color未选中时的颜色String#c7c7c7-
    icon选中时的图标名称或图片链接,可选值见 Icon 组件Stringstar1.4.7
    void-icon未选中时的图标名称或图片链接,可选值见 Icon 组件Stringstar-o1.4.7
    allow-half是否允许半选Booleanfalse1.6.14
    readonly是否为只读状态Booleanfalse1.3.0
    disabled是否禁用评分Booleanfalse-
    disabled-color禁用时的颜色String#bdbdbd-

    Events

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

    Rate 评分 - 图1