BreezeUI
  • 简体中文

    • Rate 评分

    基于 BrConfigProvider 实现全局主题配置，支持半星、自定义图标、只读态的企业级评分组件，可无缝集成 BrFormItem。

    组件特性

    • ⭐ 半星支持：支持 allow-half 属性实现半星精度。
    • 🔢 自定义数量：通过 count 属性配置星的数量。
    • 🖼️ 自定义图标：通过 character 插槽支持自定义图标。
    • 🌈 分段颜色：支持不同评分范围的分段颜色。
    • 📝 辅助文本：支持辅助文本显示。
    • ❌ 可清除：支持 allow-clear 属性清除评分。
    • 📝 表单集成：支持与 BrFormItem 和 vee-validate 无缝集成。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    最基础的评分组件用法。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrRate } from '@breezeui/vue'

const value = ref(3)
</script>

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

    半星评分

    支持半星评分，通过 allow-half 属性开启。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrRate } from '@breezeui/vue'

const value = ref(2.5)
</script>

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

    自定义图标与数量

    可以自定义图标以及评分的最大数量。

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

const value = ref(4)
</script>

<template>
  <BrRate 
    v-model="value" 
    :count="10" 
    :icon="Heart" 
    :void-icon="Heart" 
    color="#ef4444" 
  />
</template>

    只读与禁用状态

    <script setup lang="ts">
import { ref } from 'vue'
import { BrRate, BrStack } from '@breezeui/vue'

const value1 = ref(4)
const value2 = ref(3)
</script>

<template>
  <BrStack gap="4">
    <div>
      <div class="mb-2 text-sm text-muted-foreground">Read-only State (Readonly)</div>
      <BrRate v-model="value1" readonly />
    </div>
    <div>
      <div class="mb-2 text-sm text-muted-foreground">Disabled State (Disabled)</div>
      <BrRate v-model="value2" disabled />
    </div>
  </BrStack>
</template>

    主题定制

    BrRate 可以无缝接入 BrFormItem，并支持通过 BrConfigProvider 进行主题全局配置。

    <script setup lang="ts">
import { ref } from 'vue'
import { 
  BrForm, 
  BrFormItem, 
  BrFormLabel, 
  BrFormControl, 
  BrRate, 
  BrConfigProvider,
  BrButton
} from '@breezeui/vue'

const rating = ref(0)
const customTheme = ref(false)

const themeConfig = {
  primary: '#10b981', // Green Theme
}
</script>

<template>
  <div>
    <BrButton class="mb-6" @click="customTheme = !customTheme">
      Toggle Green Theme ({{ customTheme ? 'On' : 'Off' }})
    </BrButton>

    <BrConfigProvider :theme="customTheme ? themeConfig : undefined">
      <BrForm>
        <BrFormItem name="rating" :rules="[(v) => v > 0 || 'Please give a rating']">
          <BrFormLabel>Service Rating</BrFormLabel>
          <BrFormControl>
            <BrRate v-model="rating" allow-half show-text :texts="['Terrible', 'Disappointed', 'Average', 'Satisfied', 'Excellent']" />
          </BrFormControl>
        </BrFormItem>
      </BrForm>
    </BrConfigProvider>
  </div>
</template>

    API

    BrRate Props

    属性名类型默认值说明
    modelValue / v-modelnumber0当前评分值
    countnumber5图标总数
    allowHalfbooleanfalse是否允许半星评分
    readonlybooleanfalse是否为只读状态
    disabledbooleanfalse是否为禁用状态
    clearablebooleanfalse是否允许再次点击后清除
    sizeComponentSize | number'default'评分图标大小
    colorstring | string[] | Record<number, string>-激活时的颜色，支持颜色数组或分段颜色对象
    voidColorstring-未激活时的颜色
    iconComponent | stringStar激活时的图标组件
    voidIconComponent | stringStar未激活时的图标组件
    halfIconComponent | string-半星时的图标组件（如不传则通过裁剪 icon 实现）
    showTextbooleanfalse是否显示辅助文字
    textsstring[][]辅助文字数组
    validationState'default' | 'success' | 'error' | 'warning''default'校验状态，集成 BrFormItem 时自动同步

    BrRate Emits

    事件名说明回调参数
    update:modelValue评分值改变时触发(value: number)
    change评分值改变时触发(value: number)
    hoverChange鼠标悬浮评分值改变时触发(value: number)

    BrRateItem Props (内部项组件)

    通常无需直接使用，暴露以供深度定制。

    属性名类型说明
    valuenumber当前项的值
    activeValuenumber当前激活的总值
    hoverValuenumber当前悬浮的总值
    allowHalfboolean是否允许半星
    readonlyboolean是否只读
    disabledboolean是否禁用
    sizeComponentSize | number图标大小
    colorstring激活颜色
    voidColorstring未激活颜色
    iconComponent | string激活图标
    voidIconComponent | string未激活图标
    halfIconComponent | string半星图标