Rate 评分

规则

基础示例

const rule = {
    type: 'rate',
    title: '评分',
    field: 'rate',
    value: 5,
    props: {
        disabled: false,
    }
}

Props 配置示例

允许半选

const rule = {
    type: 'rate',
    title: '商品评分',
    field: 'rating',
    value: 4.5,
    props: {
        allowHalf: true,
        count: 5,
    }
}

自定义图标和颜色

const rule = {
    type: 'rate',
    title: '商品评分',
    field: 'rating',
    value: 4,
    props: {
        icon: 'like',
        voidIcon: 'like-o',
        color: '#ffd21e',
        voidColor: '#c8c9cc',
    }
}

可清空

const rule = {
    type: 'rate',
    title: '商品评分',
    field: 'rating',
    value: 0,
    props: {
        clearable: true,
        allowHalf: true,
    }
}

自定义总数

const rule = {
    type: 'rate',
    title: '推荐级别',
    field: 'level',
    value: 3,
    props: {
        count: 10,
    }
}

Events 事件示例

监听评分变化

const rule = {
    type: 'rate',
    title: '商品评分',
    field: 'rating',
    value: 0,
    props: {
        allowHalf: true,
    },
    on: {
        change: (currentValue) => {
            console.log('评分改变:', currentValue);
        },
    },
}

评分后显示反馈

const rule = {
    type: 'rate',
    title: '商品评分',
    field: 'rating',
    value: 0,
    props: {
        count: 5,
    },
    inject: true,
    on: {
        change: ($inject, currentValue) => {
            // 根据评分自动填充评价内容
            const comments = {
                1: '商品质量很差，不推荐购买',
                2: '商品一般，有待改进',
                3: '商品还可以，基本满意',
                4: '商品不错，值得推荐',
                5: '商品非常好，强烈推荐',
            };
            if (currentValue >= 1 && currentValue <= 5) {
                $inject.api.setValue('comment', comments[Math.ceil(currentValue)]);
            }
        },
    },
}

完整配置项:Vant_Rate

value :Number

Props

参数	说明	类型	默认值
count	图标总数	number | string	5
size	图标大小，默认单位为px	number | string	20px
gutter	图标间距，默认单位为px	number | string	4px
color	选中时的颜色	string	#ee0a24
void-color	未选中时的颜色	string	#c8c9cc
disabled-color	禁用时的颜色	string	#c8c9cc
icon	选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	star
void-icon	未选中时的图标名称或图片链接，等同于 Icon 组件的 name 属性	string	star-o
icon-prefix	图标类名前缀，等同于 Icon 组件的 class-prefix 属性	string	van-icon
allow-half	是否允许半选	boolean	false
clearable	是否允许再次点击后清除	boolean	false
readonly	是否为只读状态，只读状态下无法修改评分	boolean	false
disabled	是否禁用评分	boolean	false
touchable	是否可以通过滑动手势选择评分	boolean	true

Events

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