更新记录

1.0.0（2026-10-16） 下载此版本

新增

• 首次发布
• 通用评分组件：type='star' 五角星 / type='heart' 爱心双形态
• 内置 iconfont 字体图标渲染，避免 unicode 字符被系统渲染成 emoji 彩色字形
• 半星评分：allow-half，点击左半 0.5 分、右半 1 分
• 支持禁用 disabled 与只读 readonly
• 数量、尺寸、间距、颜色全部可配
• 通过 v-model 双向绑定评分，@change 获取 { value }

平台兼容性

uni-app(5.0)

ry-rate 通用评分组件

作者：Howe

通用评分组件（uni-app / Vue3 版）：type='star' 五角星 / type='heart' 爱心双形态。支持半星评分（点击左半 0.5 分、右半 1 分）、禁用、只读，数量尺寸颜色全部可配，一套 API 覆盖商品评价、服务打分、收藏喜欢等场景。

需要 uni-app x（uvue）版本请使用 ry-rate-x 插件。

安装

三种方式任选其一。

方式一：源码放到 components 目录（推荐）

下载源码后，把组件放到项目的 components/ry-rate/ry-rate.vue，保持该目录结构，即符合 easycom 默认规则，uni-app 自动注册，无需任何配置。

页面直接写 <ry-rate />。

方式二：手动导入

组件放在其他任意位置时，显式导入注册即可，与 easycom 不冲突（显式导入优先生效）：

import ryRate from '@/components/ry-rate/ry-rate.vue'

方式三：uni_modules 导入

通过 HBuilderX 从插件市场导入 uni_modules，组件位于 uni_modules/ry-rate/components/ry-rate/ 下，同样自动注册，无需 import。

字体图标说明

图标使用组件内置的 iconfont 字体渲染（不依赖 unicode 字符，避免爱心等字符被系统渲染成 emoji 彩色字形）：

• 字体文件 iconfont.ttf 与组件同目录，复制组件时请一并带上
• 码点映射在组件内的 ICON_STAR（实心五角星）/ ICON_HEART（实心爱心）两个常量，更换图标时改这里即可
• 微信小程序不支持本地字体文件：需将 ttf 转 base64 后内联到 @font-face，或改用网络字体地址

使用示例

<template>
  <!-- 1. 最简用法：五角星 + v-model -->
  <ry-rate v-model="value"/>

  <!-- 2. 爱心形态 -->
  <ry-rate v-model="value" type="heart"/>

  <!-- 3. 半星评分：点击左半 0.5 分、右半 1 分 -->
  <ry-rate v-model="value" :allow-half="true"/>

  <!-- 4. 自定义颜色与尺寸 -->
  <ry-rate v-model="value" active-color="#ff5500" :size="64" :gap="20"/>

  <!-- 5. 只读展示 + change 事件 -->
  <ry-rate :model-value="3.5" :readonly="true" @change="onChange"/>
</template>

<script setup>
    const value = ref(3)
    const onChange = (e) => {
        console.log('当前评分：', e.value)
    }
</script>

Props

Events

技术支持

• 微信：howe1144（一定在线，紧急问题首选）
• QQ 群：415367029（常规问题，群友互助，作者可能在线）
• ***（很少在线）
• 插件市场评论区：回复不及时，仅适合不着急的留言反馈

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助