更新记录

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

新增

首次发布
通用评分组件：type='star' 五角星 / type='heart' 爱心双形态
内置 iconfont 字体图标渲染（ttf 位于 uni_modules static 目录，loadFontFace 动态加载）
半星评分：allow-half，点击左半 0.5 分、右半 1 分
支持禁用 disabled 与只读 readonly
数量、尺寸、间距、颜色全部可配
通过 v-model 双向绑定评分，@change 获取 { value }

平台兼容性

uni-app x(5.26)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	√	√	√	√

ry-rate-x 通用评分组件

作者：Howe

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

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

安装

三种方式任选其一。

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

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

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

方式二：手动导入

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

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

方式三：uni_modules 导入

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

字体图标说明

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

字体文件位于 uni_modules/ry-rate-x/static/iconfont.ttf（uni-app x 要求本地字体放在项目或 uni_modules 的 static 目录下），请勿移动或删除
码点映射在组件内的 ICON_STAR（实心五角星）/ ICON_HEART（实心爱心）两个常量，更换图标时改这里即可

使用示例

<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 lang="uts">
    const value = ref(3)
    const onChange = (e : UTSJSONObject) => {
        console.log('当前评分：', e['value'])
    }
</script>

Props

参数	类型	默认值	说明
modelValue	Number	0	当前评分（v-model），支持 0.5
max	Number	5	评分总数
type	String	'star'	形态：'star' 五角星 / 'heart' 爱心
allowHalf	Boolean	false	是否支持半星评分（点击左半 0.5 分）
disabled	Boolean	false	是否禁用（不可点击，选中项置灰）
readonly	Boolean	false	是否只读（不可点击，用于纯展示）
size	Number	56	图标尺寸（rpx）
gap	Number	16	图标间距（rpx）
color	String	#e5e5e5	未选中颜色
activeColor	String	按 type	选中颜色：star 默认 #ffb400 / heart 默认 #ff4757
disabledColor	String	#c0c4cc	禁用时的选中颜色

Events

事件名	说明	回调参数
update:modelValue	评分同步（v-model）	value: Number
change	点击打分后触发	e: { value }，value 为当前评分（含 0.5）

技术支持

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

支持与赞赏

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

支付宝赞助	微信赞助