Rate 评分

规则

基础示例

const rule = {
    type:"rate",
    field:"rate",
    title:"推荐级别",
    value:3.5,
    props:{
        count: 10,
    }
}

Props 配置示例

允许半星评分

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

允许清除

const rule = {
    type:"rate",
    field:"rating",
    title:"服务评分",
    value:0,
    props:{
        count: 5,
        allowClear: true,
    }
}

只读评分

const rule = {
    type:"rate",
    field:"rating",
    title:"平均评分",
    value:4.5,
    props:{
        readonly: true,
        allowHalf: true,
    }
}

笑脸分级

const rule = {
    type:"rate",
    field:"rating",
    title:"满意度",
    value:0,
    props:{
        grading: true,
        count: 5,
    }
}

Events 事件示例

监听评分变化

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

评分后显示反馈

const rule = [
    {
        type:"rate",
        field:"rating",
        title:"商品评分",
        value:0,
        props:{
            allowHalf: true,
            count: 5,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据评分显示不同的反馈文字
                const feedbackMap = {
                    1: "很差",
                    2: "较差",
                    3: "一般",
                    4: "较好",
                    5: "很好",
                };
                const level = Math.ceil(value);
                $inject.api.setValue('feedback', feedbackMap[level] || '');
            },
        },
    },
    {
        type:"input",
        field:"feedback",
        title:"评价",
        props: {
            disabled: true,
        },
    },
]

完整配置项:arco-design_Rate

value :Number

Props

参数名	描述	类型	默认值
count	评分的总数	number	5
allow-half	是否允许半选	boolean	false
allow-clear	是否允许清除	boolean	false
grading	是否开启笑脸分级	boolean	false
readonly	是否为只读状态	boolean	false
disabled	是否禁用	boolean	false

Events

事件名	描述	参数
change	值改变时触发	value: number
hover-change	鼠标移动到数值上时触发	value: number