Appearance

Return to top
On this page

Rate 评分

基本使用

v-model 绑定评分值

显示代码
html
<template>
  <n-rate v-model="value1" />
</template>

<script setup>
  import { ref } from 'vue';
  const value1 = ref(2);
</script>

配置颜色

color 属性可以配置选中的 icon 颜色

voidColor 属性可以配置未选中的 icon 颜色


显示代码
html
<template>
  <n-rate v-model="value2" />
  <n-rate v-model="value2" effectColor="red" invalidColor="#eee" />
</template>

<script setup>
  import { ref } from 'vue';
  const value2 = ref(2);
</script>

辅助文字

showText 属性可以配置是否显示辅助文字

SayText 属性可以配置辅助文字数组

失望

2星
显示代码
html
<template>
  <n-rate v-model="value3" showText />
  <n-rate
    v-model="value3"
    showText
    :textArr="['1星', '2星', '3星', '4星', '5星']"
  />
</template>

<script setup>
  import { ref } from 'vue';
  const value3 = ref(2);
</script>

自定义图标

使用iconName可自定义图标，参考 Icon 组件

显示代码
html
<template>
  <n-rate v-model="value4" iconName="heart-fill" effectColor="red" />
</template>

<script setup>
  import { ref } from 'vue';
  const value4 = ref(2);
</script>

设置图标大小

使用iconSize可自定义图标大小，默认为 20px

显示代码
html
<n-rate
  v-model="value5"
  iconName="heart-fill"
  effectColor="red"
  iconSize="40"
/>

<script setup>
  import { ref } from 'vue';
  const value5 = ref(2);
</script>

API

参数说明类型可选值默认值
v-model绑定值number——0
iconName自定义图标名stringIcon'star-fill '
iconSize自定义图标大小string/number——20
effectColor选中的 icon 颜色string——'#fbcc30'
invalidColor未选中的 icon 颜色string——'#C6D1DE'
showText是否显示辅助文字boolean——false
textArr自定义辅助文字数组boolean——['极差', '失望', '一般', '惊喜', '满意']

Events

事件名称说明回调参数
change分值改变时的回调——