介绍

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

代码演示

基础使用

使用 v-model 绑定当前值。

vue ts

<template>
  <s-rate v-model="value" @change="onChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-rate v-model="value" @change="onChange" />
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref(3)
const onChange = (value) => {
  console.log('change', value)
}
</script>

半星

设置 allowHalf 属性后可以选中半星。

<template>
  <s-rate :model-value="2.5" allow-half />
</template>

自定义图标

通过 star 插槽设置选中时的图标，void-star 插槽设置未选中时的图标。 或者通过 text 和 void-text 属性设置文字代替图标。

<template>
  <s-flex vertical gap="medium">
    <s-rate :model-value="2.5" allow-half>
      <template #void-star>
        <demo-icon name="heart" />
      </template>
      <template #star>
        <demo-icon name="heart-fill" />
      </template>
    </s-rate>
    <s-rate :model-value="2.5" allow-half void-text="好" text="好" />
  </s-flex>
</template>

自定义颜色

通过 color 属性设置选中时的颜色，voidColor 设置未选中时的颜色。

<template>
  <s-rate :model-value="3" void-color="var(--s-color-danger)" color="var(--s-color-danger)" />
</template>

自定义尺寸和间距

通过 size 属性设置图标大小。 通过 gap 属性设置图标间距。

<template>
  <s-rate :model-value="3" size="30px" />
  <div>
    <s-rate :model-value="3" size="30px" gap="20px" />
  </div>
</template>

自定义数量

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

vue ts

<template>
  <s-rate :model-value="3" :count="count" allow-half />
  <s-slider :min="1" :max="9" v-model="count" allow-half />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(3)
</script>

vue js

<template>
  <s-rate :model-value="3" :count="count" allow-half />
  <s-slider :min="1" :max="9" v-model="count" allow-half />
</template>

<script setup lang="js">
import { ref } from 'vue'
const count = ref(3)
</script>

允许清空

当 clearable 属性设置为 true，再次点击相同的值，或划到最左边时，可以将值重置为 0。

<template>
  <s-rate :model-value="3" clearable />
</template>

只读和禁用

只读或禁用后不可操作。

<template>
  <doc-title>只读</doc-title>
  <s-rate :model-value="3" readonly />

  <doc-title>禁用</doc-title>
  <s-rate :model-value="3" disabled />
</template>

API

RateProps

属性	描述	类型	默认值
model-value	选中图标数	number	-
allow-half	是否允许半选	boolean	false
clearable	在点击相同值，或划到最左边时，是否将值重置为 0	boolean	false
count	图标总数	number	5
size	图标大小	string	-
gap	图标间距	string	-
text	自定义选中时的文字	string	-
void-text	自定义未选中时的文字	string	-
color	选中时的颜色	string	-
void-color	未选中时的颜色	string	-
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
validate-event	是否触发表单验证	boolean	true

RateEmits

事件	描述	类型
update:modelValue	选中的值改变时触发	(value: number) => void
change	选中的值改变时触发	(value: number) => void

主题定制

样式变量

CSS 变量	值
--s-rate-gap	var(--s-size-xs)
--s-rate-star-font-size	var(--s-size-lg)
--s-rate-void-star-color	var(--s-text-color-fourth)
--s-rate-star-color	var(--s-color-warning)