Rate

Rules

Basic Example

const rule = {
    type:"rate",
    field:"rate",
    title:"Recommendation Level",
    value:3.5,
    props:{
        count: 10,
    },
    validate:[
        {required:true,type:'number',min:3, message: 'Please rate at least 3 stars',trigger:'change'}
    ]
}

Props Configuration Examples

Allow Half Selection

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:4.5,
    props:{
        allowHalf: true,
        count: 5,
    },
}

Custom Character

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:4,
    props:{
        character: "❤",
        count: 5,
    },
}

Custom Tooltip

const rule = {
    type:"rate",
    field:"satisfaction",
    title:"Satisfaction",
    value:3,
    props:{
        tooltips: ['Very Poor', 'Disappointed', 'Average', 'Satisfied', 'Surprised'],
    },
}

Disabled State

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:4,
    props:{
        disabled: true,
    },
}

Events Examples

Listen to Rating Changes

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        allowHalf: true,
    },
    on: {
        change: (value) => {
            console.log('Rating changed:', value);
        },
        hoverChange: (value) => {
            console.log('Mouse hover:', value);
        },
        focus: () => {
            console.log('Component focused');
        },
        blur: () => {
            console.log('Component blurred');
        },
    },
}

Display Feedback After Rating

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        tooltips: ['Very Poor', 'Disappointed', 'Average', 'Satisfied', 'Surprised'],
    },
    inject: true,
    on: {
        change: ($inject, value) => {
                // Auto-fill comment based on rating
            const comments = {
                    1: 'Very poor quality, not recommended',
                    2: 'Average quality, needs improvement',
                    3: 'Decent quality, satisfied',
                    4: 'Good quality, worth recommending',
                    5: 'Excellent quality, highly recommended',
            };
            if (value >= 1 && value <= 5) {
                $inject.api.setValue('comment', comments[Math.ceil(value)]);
            }
        },
    },
}

Complete configuration items: Ant-desing-vue_Rate

value :Number

Props

Property	Description	Type	Default
allowClear	Whether to allow clearing after clicking again	boolean	true
allowHalf	Whether to allow half selection	boolean	false
autofocus	Auto focus	boolean	false
character	Custom character	string | slot	<StarOutlined />
count	Total number of stars	number	5
disabled	Read-only, cannot interact	boolean	false
tooltips	Custom tooltip for each item	string[]	-

Events

Event Name	Description	Callback Parameters
blur	Callback when losing focus	Function()
change	Callback when selecting	Function(value: number)
focus	Callback when gaining focus	Function()
hoverChange	Callback when value changes on mouse hover	Function(value: number)
keydown	Key press callback	Function(event)