Rate 评分

介绍

评价中的评分操作。

基础用法

通过 v-model 绑定选中的评分。

<vd-rate v-model="rate" />

const rate = ref(0);

评分个数

通过 count 属性自定义评分个数。

<vd-rate v-model="rate" :count="7" />

const rate = ref(0);

自定义图标

通过 icon 设置评分的激活图标，inactive-icon 设置评分的未激活图标。

<vd-rate v-model="rate" icon="love-fill" />

const rate = ref(0);

自定义颜色

通过 color 设置评分的激活颜色，inactive-color 设置评分的未激活颜色。

<vd-rate v-model="rate" color="#f40" />

const rate = ref(0);

自定义单个评分颜色

通过 color 设置评分的激活颜色，inactive-color 设置评分的未激活颜色。

<vd-rate v-model="rate">
  <vd-rate-item
    v-for="(_, index) in 5"
    :key="index"
    :index="index"
    :color="colors[index]"
  />
</vd-rate>

const colors = [
  'rgba(255, 210, 30, 0.5)',
  'rgba(255, 210, 30, 0.75)',
  '#ffd21e',
  '#ff976a',
  '#ee0a24',
];

const rate = ref(0);

分段选择

通过 segments 开启分段选择，例如分 2 段则每段评分 1 / 2 = 0.5。

<vd-rate v-model="rate" :segments="2" />

const rate = ref(0);

只读状态

通过 readonly 设置只读状态，只读状态下无法进行评分。

<vd-rate v-model="rate" readonly />

const rate = ref(0);

禁用状态

通过 disabled 设置禁用状态，禁用状态下无法进行评分。

<vd-rate v-model="rate" disabled />

const rate = ref(0);

使用插槽

通过插槽可以自定义评分的激活/未激活图标。

<vd-rate v-model="rate">
  <vd-rate-item v-for="(num, index) in 3" :key="num" :index="index">
    <template #inactive><vd-icon name="star" /></template>
    <template #active><vd-icon name="star-fill" /></template>
  </vd-rate-item>
</vd-rate>

const rate = ref(0);

API

Rate Props

参数	说明	类型	默认值
v-model	选中分值	string | number	-
count	评分个数	string | number	5
segments	选择段数	string | number	1
size	图标大小	string | number	26
icon	激活图标	IconsName	star-fill
inactive-icon	未激活图标	IconsName	-
color	激活颜色	string	-
inactive-color	未激活颜色	string	-
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
swipeable	是否开启左右滑动手势	boolean	true
clickable	是否允许点击更改分值	boolean	true

RateItem Props

参数	说明	类型	默认值
segments	选择段数	string | number	-
size	图标大小	string | number	-
icon	激活图标	IconsName	-
inactive-icon	未激活图标	IconsName	-
color	激活颜色	string	-
inactive-color	未激活颜色	string	-
clickable	是否允许点击更改分值	boolean	-
index	索引，循环时设置该值防止顺序异常	string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Rate Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	评分改变时触发	number
click-item	点击评分时触发	RateOnClickItemEvent
swipe-change	手势滑动改变时触发	RateOnSwipeChangeEvent

RateItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Rate Slots

名称	说明
default	自定义内容

RateItem Slots

名称	说明
active	激活图标
inactive	未激活图标