import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const a={class:"markdown-body"},n=d('

Rate 评分

介绍

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

安装

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

代码演示

基础用法

    <nut-rate \n        v-model:value="state.val"\n    >\n    </nut-rate>\n

自定义icon

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

自定义数量

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

自定义颜色

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

禁用状态

    <nut-rate \n        :disabled="true" \n        v-model:value="state.val6"\n    >\n    </nut-rate>\n

只读

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

绑定事件

<nut-rate \n    @click="onClick"\n>\n</nut-rate>\n

自定义尺寸

<nut-rate \n    :size="35"\n>\n</nut-rate>\n

Prop

字段说明类型默认值
totalstar 总数Number5
value当前 star 数，可使用 v-model 双向绑定数据Number0
sizestar 大小Number25
spacing两个star的间距Number20
read-only是否只读Booleanfalse
unchecked-icon使用图标(未选中)String-
checked-icon使用图标(选中)String-

Event

字段说明回调参数
click点击star时触发star的index
',26),r={expose:[],setup:d=>(d,r)=>(e(),t("div",a,[n]))};export default r;