Rate 评星

介绍

用于对事物进行评级操作的组件。

导入

import Rate from '@/components/form/Rate.vue'

用法

基础用法

通过 v-model 绑定评分值。

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

<script setup lang="ts">
import { ref } from 'vue'
import Rate from '@/components/form/Rate.vue'

const value = ref(3)
</script>

自定义图标和颜色

通过 icon 和 voidIcon 设置选中和未选中的图标，通过 starActiveColor 和 starColor 设置颜色。

<template>
  <Rate 
    v-model="value" 
    icon="clock-filling"
    voidIcon="stop"
    starActiveColor="primary"
    starColor="lightGrey"
  />
</template>

动态图标和颜色

可以根据评分值动态切换图标和颜色。

<template>
  <Rate 
    v-model="value"
    :icon="dynamicIcon"
    voidIcon="cry"
    :starActiveColor="dynamicIconColor"
    starColor="lightGrey"
  />
</template>

<script setup lang="ts">
import Rate from '@/components/form/Rate.vue';
import { computed, ref } from 'vue';

const value = ref(1);
const dynamicIcon = computed(() => {
  if (value.value >= 4)
    return 'smile-filling';
  else if (value.value >= 2 && value.value < 4)
    return 'meh-filling';
  return 'cry-filling';
});
const dynamicIconColor = computed(() => {
  switch(value.value) {
    case 1:
      return '#FF4D4F';
    case 2:
      return '#FF9900';
    case 3:
      return '#FFCC00';
    case 4:
      return '#99CC33';
    case 5:
      return '#4caf50';
  }
});
</script>

自定义大小

通过 size 属性设置星星大小。

<template>
  <Rate v-model="value" :size="80" />
</template>

可选择半星

通过 half 属性启用半星选择功能。

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

自定义星星数量

通过 count 属性设置星星总数。

<template>
  <Rate v-model="value" :count="10" />
</template>

禁用状态

通过 disabled 属性禁用评星组件。

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

只读状态

通过 readonly 属性设置为只读，不可选择。

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

API 参考

Rate

评星组件。

Props

名称	说明	类型	必填	默认值
v-model	评星组件参数值	number	否	0
count	星星的数量	number	否	5
canbeZero	是否可以为0星	boolean	否	false
starStyle	星星未激活自定义样式	object	否	-
starActiveStyle	星星激活自定义样式	object	否	-
starActiveColor	星星激活的颜色	string	否	'warning'
starColor	星星未激活的颜色	string	否	'grey'
starDisableColor	星星禁用的颜色	string	否	'grey'
icon	选中时的图标	string	否	'favorite-filling'
voidIcon	未选中时的图标	string	否	'favorite'
space	星星之间的间距	number	否	3
half	用户是否可以选择出半星	boolean	否	false
readonly	是否只读	boolean	否	false
disabled	评星组件是否禁用	boolean	否	false
size	评星组件大小	number	否	48

Events

名称	说明	参数
update:modelValue	评分变化时触发	value: number

主题变量

名称	类型	默认值	说明
RateStarActiveColor	string	'warning'	星星激活颜色
RateStarColor	string	'grey'	星星未激活颜色
RateStarDisableColor	string	'grey'	星星禁用颜色
RateIcon	string	'favorite-filling'	选中图标
RateVoidIcon	string	'favorite'	未选中图标
RateSpace	number	3	星星间距
RateSize	number	48	星星大小