更新记录

1.0.5（2020-07-28）

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

1.0.4（2020-07-28）

• 新增 disabled 属性，可设置组件禁用状态（之前版本的不可点击状态）
• 新增 disabledColor 属性，可设置禁用颜色
• 新增 readonly 属性，可设置组件只读属性
• 新增 allowHalf 属性，可设置组件是否开启半星选择
• 新增 touchable 属性，可设置组件是否支持滑动手势
• 修复 动态传值不更新的问题
• 优化 value 属性可使用 v-model 双向绑定数据

发现错误？想参与编辑？在 GitHub 上编辑此页面！

Rate 评分

组件名：uni-rate，代码块： uRate。

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

平台差异说明

如无特殊说明，则全平台支持

使用说明

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

• 组件需要依赖 sass 插件 ，请自行手动安装
• 组件内部依赖 'uni-icons' 组件
• 暂时不支持零星选择
• 绑定值推荐使用 v-model 的方式

使用方式

方式1 (推荐)

HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候，只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用 uni-ui 组件

easycom 组件模式的好处在于不管 components 目录下安装了多少组件，easycom 打包后会自动剔除没有使用的组件，对组件库的使用尤为友好,组件库批量安装，随意使用，自动按需打包。 关于 easycom 更详细内容 参考文档

方式2（vue-cli）

初始化项目

如果是使用 HBuiderX 创建的项目，需先执行以下命令初始化：

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui -D

在 script 中引用组件：

import {uniRate} from '@dcloudio/uni-ui'
export default {
    components: {uniRate}
}

方式3（vue-cli + easycom）

使用 方式2 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

    // 其他内容
    pages:[
        // ...
    ]
}

基本用法

<!-- 基本用法 -->
<!-- 需要在 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))
        }
    }
}

uni-rate 属性说明

uniListChat 事件说明

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/rate/rate