Rate 评分
介绍
用于对事物进行评级操作。
代码演示
自定义图标
通过 icon
属性设置选中时的图标,void-icon
属性设置未选中时的图标。
<z-rate v-model="value" icon="heart-fill" void-icon="heart" />
自定义样式
通过 size
属性设置图标大小,color
属性设置选中时的颜色,void-color
设置未选中时的颜色。
<z-rate
v-model="value"
:size="35"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
半星
设置 allow-half
属性后可以选中半星。
<z-rate v-model="value" allow-half />
import { ref } from 'vue';
const value = ref(2.5);
只读状态显示小数
设置 readonly
和 allow-half
属性后,Rate 组件可以展示任意小数结果。
<z-rate v-model="value" readonly allow-half />
import { ref } from 'vue';
const value = ref(3.3);
监听 change 事件
评分变化时,会触发 change
事件。
<z-rate v-model="value" @change="onChange" />
import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const value = ref(3);
const onChange = (value) => showToast('当前值:' + value);
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前分值 | number | - |
count | 图标总数 | number | string | 5 |
size | 图标大小,默认单位为px | number | string | 40rpx |
gutter | 图标间距,默认单位为px | number | string | 8rpx |
color | 选中时的颜色 | string | #ee0a24 |
void-color | 未选中时的颜色 | string | #c8c9cc |
disabled-color | 禁用时的颜色 | string | #c8c9cc |
icon | 选中时的图标名称或图片链接,等同于 Icon 组件的 name 属性 | string | star-fill |
void-icon | 未选中时的图标名称或图片链接,等同于 Icon 组件的 name 属性 | string | star |
icon-prefix | 图标类名前缀,等同于 Icon 组件的 class-prefix 属性 | string | z-icon |
allow-half | 是否允许半选 | boolean | false |
clearable | 是否允许再次点击后清除 | boolean | false |
readonly | 是否为只读状态,只读状态下无法修改评分 | boolean | false |
disabled | 是否禁用评分 | boolean | false |
touchable | 是否可以通过滑动手势选择评分 | boolean | true |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当前分值变化时触发的事件 | currentValue: number |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-rate-icon-size | 40rpx | - |
--z-rate-icon-gutter | var(--z-padding-base) | - |
--z-rate-icon-void-color | var(--z-gray-5) | - |
--z-rate-icon-full-color | var(--z-danger-color) | - |
--z-rate-icon-disabled-color | var(--z-gray-5) | - |