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,
        color: "#FF6B6B",
    }
}

只读评分

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:{
        size: "large",
        count: 5,
    }
}

Events 事件示例

监听评分变化

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

评分后显示反馈

const rule = [
    {
        type:"rate",
        field:"rating",
        title:"商品评分",
        value:0,
        props:{
            allowHalf: true,
            count: 5,
        },
        inject: true,
        on: {
            'update:value': ($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,
        },
    },
]

完整配置项:naive-ui_Rate

value :Number

Props

名称	类型	默认值	说明
allow-half	boolean	false	允许只激活一半图标
color	string	undefined	已激活图标颜色（支持形如 #FFF， #FFFFFF， yellow，rgb(0, 0, 0) 的颜色）
count	number	5	图标个数
readonly	boolean	false	只读，交互失效
size	'small' | 'medium' | 'large' | number	'medium'	图标尺寸