Skip to content

Rate 评分

评分组件。

基础用法

展示基础的评分效果。

vue
<template>
  <SxoRate v-model="value" />
</template>

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

辅助文字

设置 show-text 属性可以展示辅助文字。

vue
<template>
  <SxoRate v-model="value" show-text :texts="['极差', '失望', '一般', '满意', '惊喜']" />
</template>

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

只读状态

设置 disabled 属性使组件只读。

vue
<template>
  <SxoRate v-model="value" disabled />
</template>

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

Rate 属性

参数说明类型默认值
modelValue / v-model当前分值number0
countstar 总数number5
disabled是否只读booleanfalse
showText是否显示辅助文字booleanfalse
texts辅助文字数组string[][]

Rate 事件

事件名说明参数
update:modelValue分值变化时触发value: number
change分值变化时触发value: number

API

参数说明类型默认值
modelValue-Number0
count-Number5
disabled-Booleanfalse
showText-Booleanfalse
texts-Array as () => string[][]