import{c as t,o as e,B as d}from"./vendor.36ea9f7d.js";const o={class:"markdown-body"},a=d('

Rate 评分

介绍

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

安装

import { createApp } from 'vue';\nimport { Rate } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Rate);\n

代码演示

基础用法

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

import { ref } from 'vue';\nsetup() {\n    const value = ref(3);\n    return { value }\n}\n

自定义icon

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

自定义数量

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

自定义颜色

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

禁用状态

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

只读

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

绑定事件

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

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

自定义尺寸

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

Prop

字段	说明	类型	默认值
v-model	当前 star 数，可使用 v-model 双向绑定数据	Number	-
count	star 总数	Number	5
icon-size	star 大小	Number	18
active-color	图标选中颜色	String	#fa200c
void-color	图标未选中颜色	String	#ccc
unchecked-icon	使用图标(未选中)	String	star-n
checked-icon	使用图标(选中)	String	star-fill-n
allow-half	是否半星	Boolean	false
readonly	是否只读	Boolean	false
disabled	是否禁用	Boolean	false
spacing	间距	Number	20

Event

字段	说明	回调参数
change	当前分值修改时时触发的事件	当前值

',28),r={expose:[],setup:d=>(d,r)=>(e(),t("div",o,[a]))};export default r;