Rate 评分

规则

基础示例

const rule = {
    type:"rate",
    field:"rate",
    title:"推荐级别",
    value:3.5,
    props:{
        count: 10,
    },
    validate:[
        {required:true,type:'number',min:3, message: '请大于3颗星',trigger:'change'}
    ]
}

Props 配置示例

允许半选

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

自定义字符

const rule = {
    type:"rate",
    field:"rating",
    title:"商品评分",
    value:4,
    props:{
        character: "❤",
        count: 5,
    },
}

自定义提示信息

const rule = {
    type:"rate",
    field:"satisfaction",
    title:"满意度",
    value:3,
    props:{
        tooltips: ['极差', '失望', '一般', '满意', '惊喜'],
    },
}

禁用状态

const rule = {
    type:"rate",
    field:"rating",
    title:"商品评分",
    value:4,
    props:{
        disabled: true,
    },
}

Events 事件示例

监听评分变化

const rule = {
    type:"rate",
    field:"rating",
    title:"商品评分",
    value:0,
    props:{
        allowHalf: true,
    },
    on: {
        change: (value) => {
            console.log('评分改变:', value);
        },
        hoverChange: (value) => {
            console.log('鼠标悬停:', value);
        },
        focus: () => {
            console.log('获得焦点');
        },
        blur: () => {
            console.log('失去焦点');
        },
    },
}

评分后显示反馈

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

完整配置项:Ant-desing-vue_Rate

value :Number

Props

属性	说明	类型	默认值
allowClear	是否允许再次点击后清除	boolean	true
allowHalf	是否允许半选	boolean	false
autofocus	自动获取焦点	boolean	false
character	自定义字符	string | slot	<StarOutlined />
count	star 总数	number	5
disabled	只读，无法进行交互	boolean	false
tooltips	自定义每项的提示信息	string[]	-

Events

事件名称	说明	回调参数
blur	失去焦点时的回调	Function()
change	选择时的回调	Function(value: number)
focus	获取焦点时的回调	Function()
hoverChange	鼠标经过时数值变化的回调	Function(value: number)
keydown	按键回调	Function(event)