Rate 评分

评分组件，支持半星、自定义字符和清除。

基础用法

★★★★★★★★★★

评分：3

基础评分，v-model 绑定评分值

vue

<template>
  <div>
    <ARate v-model="val" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">评分：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ARate } from '@lite-code/aui-vue'

const val = ref(3)
</script>

半星

设置 allowHalf 支持选择半星。

★★★★★★★★★★

评分：2.5

半星模式，光标在星星左侧触发半星

vue

<template>
  <div>
    <ARate v-model="val" :allow-half="true" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">评分：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ARate } from '@lite-code/aui-vue'

const val = ref(2.5)
</script>

允许清除

设置 allowClear，再次点击同一评分可清零。

★★★★★★★★★★

再次点击同一星可清零。评分：3

allowClear 再次点击清零

vue

<template>
  <div>
    <ARate v-model="val" :allow-clear="true" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">再次点击同一星可清零。评分：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ARate } from '@lite-code/aui-vue'

const val = ref(3)
</script>

禁用状态

★★★★★★★★★★

禁用状态，不可交互

vue

<template>
  <ARate :model-value="3" disabled />
</template>

<script setup lang="ts">
import { ARate } from '@lite-code/aui-vue'
</script>

自定义字符

通过 character 和 count 自定义评分字符和数量。

♥♥♥♥♥♥♥♥♥♥

AAAAAA

自定义字符和数量

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <ARate v-model="val1" character="♥" :count="5" />
    <ARate v-model="val2" character="A" :count="3" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ARate } from '@lite-code/aui-vue'

const val1 = ref(3)
const val2 = ref(2)
</script>

尺寸

★★★★★★★★★★

★★★★★★★★★★

★★★★★★★★★★

sm / md / lg 三种尺寸

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <ARate :model-value="3" size="sm" />
    <ARate :model-value="3" size="md" />
    <ARate :model-value="3" size="lg" />
  </div>
</template>

<script setup lang="ts">
import { ARate } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	number	—	受控评分值
defaultValue	number	0	非受控初始值
count	number	5	星星总数
allowHalf	boolean	false	允许半星
allowClear	boolean	true	允许再次点击清零
disabled	boolean	false	禁用
character	string	'★'	评分字符
size	'sm' | 'md' | 'lg'	'md'	尺寸

Events

事件名	回调参数	说明
update:modelValue	(value: number)	评分变更
change	(value: number)	评分变更