Rate 评分

规则

基础示例

const rule = {
    type:"rate",
    field:"rate",
    title:"推荐级别",
    value:3.5,
    props:{
        max: 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,
        max: 5,
    },
}

显示文字

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

显示分数

const rule = {
    type:"rate",
    field:"score",
    title:"评分",
    value:4,
    props:{
        showScore: true,
        scoreTemplate: '{value} 分',
    },
}

自定义颜色

const rule = {
    type:"rate",
    field:"rating",
    title:"商品评分",
    value:4,
    props:{
        colors: {
            2: '#99A9BF',
            4: '#F7BA2A',
            5: '#FF9900'
        },
    },
}

可清空

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

Events 事件示例

监听评分变化

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

评分后显示反馈

const rule = {
    type:"rate",
    field:"rating",
    title:"商品评分",
    value:0,
    props:{
        showText: true,
        texts: ['极差', '失望', '一般', '满意', '惊喜'],
    },
    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)]);
            }
        },
    },
}

完整配置项:Element_Rate

value :Number

Props

属性名	说明	类型	默认值
max	最大分值	number	5
size	尺寸	enum	—
disabled	是否为只读	boolean	false
allowHalf	是否允许半选	boolean	false
lowThreshold	低分和中等分数的界限值， 值本身被划分在低分中	number	2
highThreshold	高分和中等分数的界限值， 值本身被划分在高分中	number	4
colors	icon 的颜色。 若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色	object	['#f7ba2a', '#f7ba2a', '#f7ba2a']
voidColor	未选中 icon 的颜色	string	#c6d1de
disabledVoidColor	只读时未选中 icon 的颜色	string	#eff2f7
icons	图标组件 若传入数组，则需要传入 3 个元素，分别为 3 个部分所对应的类名；若传入对象，则可自定义分段，键名为分段的界限值，键值为对应的类名	object	[StarFilled, StarFilled, StarFilled]
voidIcon	未被选中的图标组件	string / Component	Star
disabledVoidIcon	禁用状态的未选择图标	string / Component	StarFilled
showText	是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容	boolean	false
showScore	是否显示当前分数， show-score 和 show-text 不能同时为真	boolean	false
textColor	辅助文字的颜色	string	''
texts	辅助文字数组	array	['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
scoreTemplate	分数显示模板	string
clearable	是否可以重置值为 0	boolean	false
id	原生 id 属性	string	—
ariaLabel	和 Rate 的 aria-label 属性保持一致	string	—

Events

事件名	描述说明	类型
change	分值改变时触发	Function