Rate 评分

对事物进行评级的星形组件

何时使用

  • 需要对内容进行星级评分时。

导入

import { Rate } from "@reglow/reui";
3 分

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { Rate } from '@reglow/reui'

const value = ref(3)
</script>

<template>
  <Rate v-model="value" />
</template>

更多示例

半星

<script setup lang="ts">
import { ref } from 'vue'
import { Rate } from '@reglow/reui'

const value = ref(2.5)
</script>

<template>
  <Rate v-model="value" allow-half />
</template>

尺寸

三种尺寸：small、medium、large。

<template>
  <Rate size="small" />
  <Rate size="medium" />
  <Rate size="large" />
</template>

自定义字符

<script setup lang="ts">
import { ref } from 'vue'
import { Rate } from '@reglow/reui'

const value = ref(3)
</script>

<template>
  <Rate v-model="value" character="好" />
</template>

只读

<template>
  <Rate :model-value="4" disabled />
</template>

带 Tooltip

<script setup lang="ts">
import { ref } from 'vue'
import { Rate } from '@reglow/reui'

const value = ref(0)
</script>

<template>
  <Rate
    v-model="value"
    :tooltips="['很差', '差', '一般', '好', '很好']"
  />
</template>

自定义渲染星星

<script setup lang="ts">
import { ref } from 'vue'
import { Rate } from '@reglow/reui'
import { Heart } from 'lucide-vue-next'

const value = ref(3)
</script>

<template>
  <Rate v-model="value">
    <template #character="{ fill }">
      <Heart
        class="size-5 transition-colors"
        :class="fill > 0 ? 'text-red-500' : 'text-muted-foreground/30'"
        :fill="fill > 0 ? 'currentColor' : 'none'"
      />
    </template>
  </Rate>
</template>

API

Rate Props

参数说明类型默认值
modelValue (v-model)当前值number0
defaultValue默认值（非受控）number0
count星星总数number5
allowHalf是否允许半选booleanfalse
allowClear是否允许再次点击后清除booleantrue
disabled只读，无法进行交互booleanfalse
size星星尺寸'small' | 'medium' | 'large''medium'
character自定义字符string-
tooltips自定义每项的提示信息string[]-

Rate Events

事件名说明回调参数
change选择时的回调(value: number)
hoverChange鼠标经过时数值变化回调(value: number)
keydown按键回调(e: KeyboardEvent)

Rate Slots

插槽名说明参数
character自定义星星渲染{ index: number, fill: number }
character-active激活态渲染{ index: number }

键盘操作

按键说明
ArrowRight / ArrowUp增加评分
ArrowLeft / ArrowDown减少评分
0清零
1 - 9直接设置评分
Radio 单选框
从少量互斥选项中选择单个选项
Segmented 分段控制器
Segmented 分段控制器