Rate

Rules

Basic Example

const rule = {
    type:"rate",
    field:"rate",
    title:"Recommendation Level",
    value:3.5,
    props:{
        count: 10,
    }
}

Props Configuration Examples

Allow Half Star Rating

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

Custom Color

const rule = {
    type:"rate",
    field:"rating",
    title:"Service Rating",
    value:0,
    props:{
        count: 5,
        color: "#FF6B6B",
    }
}

Readonly Rating

const rule = {
    type:"rate",
    field:"rating",
    title:"Average Rating",
    value:4.5,
    props:{
        readonly: true,
        allowHalf: true,
    }
}

Different Sizes

const rule = {
    type:"rate",
    field:"rating",
    title:"Rating",
    value:0,
    props:{
        size: "large",
        count: 5,
    }
}

Events Examples

Handle Rating Changes

const rule = {
    type:"rate",
    field:"rating",
    title:"Product Rating",
    value:0,
    props:{
        allowHalf: true,
        count: 5,
    },
    on: {
        'update:value': (value) => {
            console.log('Rating changed:', value);
        },
    },
}

Show Feedback After Rating

const rule = [
    {
        type:"rate",
        field:"rating",
        title:"Product Rating",
        value:0,
        props:{
            allowHalf: true,
            count: 5,
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // Display feedback based on rating
                const feedbackMap = {
                    1: "Very Poor",
                    2: "Poor",
                    3: "Average",
                    4: "Good",
                    5: "Excellent",
                };
                const level = Math.ceil(value);
                $inject.api.setValue('feedback', feedbackMap[level] || '');
            },
        },
    },
    {
        type:"input",
        field:"feedback",
        title:"Feedback",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_Rate

value :Number

Props

Name	Type	Default Value	Description
allow-half	boolean	false	Allow only half icon activation
color	string	undefined	Color of activated icons (supports colors like #FFF, #FFFFFF, yellow, rgb(0, 0, 0))
count	number	5	Number of icons
readonly	boolean	false	Readonly, interaction disabled
size	'small' | 'medium' | 'large' | number	'medium'	Icon size