uv-ui

# Rate 评分

✈

组件名：uv-rate

点击下载&安装 (opens new window)

该组件一般用于星级打分评价，比如网上购买产品后进行评价等场景。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过count参数设置总共有多少颗星星可选择
  • 通过v-model双向绑定初始化时默认选中的星星数量
<template>
	<uv-rate :count="count" v-model="value"></uv-rate>
</template>
<script>
	export default {
		data() {
			return {
				count: 4,
				value: 2
			}
		}
	}
</script>

# 自定义样式

  • 通过active-color设置选中的星星的颜色
  • 通过inactive-color设置未选中时星星的颜色
  • 通过gutter设置星星的间距，左右内边距各占gutter的一半
<uv-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></uv-rate>

# 自定义图标

  • 通过inactive-icon设置未激活的图标
  • 通过active-icon设置激活的图标

下方示例为使用心形图标替代默认的星星图标：

<uv-rate activeIcon="heart-fill" inactiveIcon="heart"></uv-rate>

# 最少选中的数量

<uv-rate :minCount="5"></uv-rate>

# 禁用状态

禁用下，无法点击或者滑动选择，但是可以通过value设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

<uv-rate :value="3.7" disabled></uv-rate>

# 只读状态

只读状态无法点击或者滑动选择，但是可以通过value设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

<uv-rate :value="3.7" readonly></uv-rate>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Rate Props

参数 说明 类型 默认值 可选值
value / v-model 双向绑定选择星星的数量 String | Number 1 -
count 最多可选的星星数量 String | Number 5 -
disabled 是否禁止用户操作 Boolean false true | false
readonly 是否只读 Boolean false true | false
size 星星的大小，单位rpx String | Number 18 -
inactiveColor 未选中星星的颜色 String #b2b2b2 -
activeColor 选中的星星颜色 String #FA3534 -
gutter 星星之间的距离 String | Number 4 -
minCount 最少选中星星的个数 String | Number 1 -
allowHalf 是否允许半星选择，仅vue生效 Boolean false true | false
activeIcon 选中时的图标名，只能为uv-ui的内置图标 String star-fill -
inactiveIcon 未选中时的图标名，只能为uv-ui的内置图标 String star -
touchable 是否可以通过滑动手势选择评分 Boolean true true | false

# Rate Events

事件名 说明 回调参数
@change 选中的星星发生变化时触发 value：当前选中的星星的数量，如果使用v-model双向绑定方式，无需监听此事件

← Search 搜索 →