更新记录

1.0.6（2020-12-21）

• 修复 size 属性设置 String 类型值，只能选择1星的Bug

1.0.5（2020-07-28）

• 修复 支付宝小程序获取节点信息错误的Bug

Rate 评分

代码块： uRate 关联组件：uni-icons

评分组件，多用于购买商品后，对商品进行评价等场景

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。

• 暂时不支持零星选择
• 当前版本暂不支持修改图标，后续版本会继续优化
• 绑定值推荐使用 v-model 的方式
• 如需设置一个星星表示多分，如：显示5个星星，最高分10分。这种情况请在 change 事件监听中自行处理，获取到的值乘以你的基数就可以，默认组件是一星一分

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册componets。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

<!-- 基本用法 -->
<!-- 需要在 script 中绑定 value 变量 -->
<uni-rate v-model="value" @change="onChange"/>

<!-- 不支持滑动手势选择评分 -->
<uni-rate :touchable="false" :value="5"/>
<!-- 设置尺寸大小 -->
<uni-rate :size="18" :value="5"/>

<!-- 设置评分数 -->
<uni-rate :max="10" :value="5" />

<!-- 设置星星间隔 -->
<uni-rate :value="4" :margin="20" />    

<!-- 设置颜色 -->
<uni-rate :value="3" color="#bbb" active-color="red" />

<!-- 选择半星 -->
<uni-rate allow-half :value="3.5" />

<!-- 只读状态 -->
<uni-rate :readonly="true" :value="2" />

<!-- 禁用状态 -->
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />

<!-- 未选中的星星为镂空状态 -->
<uni-rate :value="3" :is-fill="false" />

export default {
    components: {},
    data() {
        return {
            value: 2
        }
    },
    methods: {
        onChange(e) {
            console.log('rate发生改变:' + JSON.stringify(e))
        }
    }
}

API

Rate Props

Rate Events