介绍

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

引入

import Rate from 'sard-uniapp/components/rate/rate.vue'

代码演示

基础使用

使用 v-model 绑定当前值。

vue lang="ts"

<template>
  <sar-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 lang="js"

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

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

半星

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

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

自定义图标

通过 icon 属性设置选中时的图标，voidIcon 属性设置未选中时的图标。 或者通过 text 和 voidText 属性设置文字代替图标。

<template>
  <sar-rate
    :model-value="2.5"
    allowHalf
    icon-family="demo-icons"
    void-icon="heart"
    icon="heart-fill"
  />
  <view>
    <sar-rate :model-value="2.5" allow-half disabled void-text="好" text="好" />
  </view>
</template>

自定义颜色

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

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

自定义尺寸和间距

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

<template>
  <sar-rate :model-value="3" size="60rpx" />
  <view>
    <sar-rate :model-value="3" size="60rpx" gap="40rpx" />
  </view>
</template>

自定义数量

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

vue lang="ts"

<template>
  <sar-rate :model-value="3" :count="count" allow-half />
  <sar-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 lang="js"

<template>
  <sar-rate :model-value="3" :count="count" allow-half />
  <sar-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>
  <sar-rate :model-value="3" clearable />
</template>

只读和禁用

只读或禁用后不可操作。

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

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

API

RateProps

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

RateEmits

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

主题定制

CSS 变量

page,
.sar-portal {
  --sar-rate-gap: 20rpx;
  --sar-rate-star-font-size: 40rpx;
  --sar-rate-star-void-color: var(--sar-fourth-color);
  --sar-rate-star-color: var(--sar-warning);
}