uView Rate 评分

本文主要是介绍uView Rate 评分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

该组件一般用于满意度调查，星型评分的场景。

#平台差异说明

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

#基本使用

• 通过count参数设置总共有多少颗星星可选择
• 通过v-model双向绑定初始化时默认选中的星星数量

<template><u-rate :count="count" v-model="value"></u-rate>
</template><script>export default {data() {return {count: 4,value: 2}}}
</script>

copy

#自定义样式

• 通过active-color设置选中的星星的颜色
• 通过inactive-color设置未选中时星星的颜色
• 通过gutter设置星星的间距，左右内边距各占gutter的一半

<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

copy

#自定义图标

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

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

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

copy

#最少选中的数量

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

copy

#禁用状态

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

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

copy

#只读状态

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

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

这篇关于uView Rate 评分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---