Rate 评分

介绍

用于快速的评级操作，或对评价进行展示。

安装

import { createApp } from 'vue';
import { Rate } from '@nutui/nutui';
const app = createApp();
app.use(Rate);

代码演示

基础用法

<nut-rate v-model="value" />

import { ref } from 'vue';
setup() {
    const value = ref(3);
    return { value }
}

自定义icon

<nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />

自定义数量

<nut-rate :total="6" v-model="value" />

自定义颜色

<nut-rate active-color="#FFC800" v-model="value" />

禁用状态

<nut-rate disabled v-model="value" />

只读

<nut-rate v-model="value" readOnly />

绑定事件

<nut-rate v-model="value" @change="onChange" />

import { ref } from 'vue';
setup() {
    const value = ref(3);
    const onChange = (val)=>{
        Toast.text(val);
    }
    return { value }
}

自定义尺寸

<nut-rate v-model="value" icon-size="35" />

Prop

Event