更新记录

1.0.0（2026-04-16）

• 基础展示：显示固定分数（只读模式），支持任意分数值
• 用户打分：点击星星进行打分（可选模式），提供即时反馈
• 半星支持：支持 0.5 分的粒度，并且根据小数部分动态调整填充比例（如 4.1 分填充 10%，4.2 分填充 20%）
• 自定义图标：可替换成自定义图片/图标（如爱心、大拇指等）
• 尺寸颜色：星星大小、颜色、间距可配置，适应不同场景
• 文案辅助：显示评分对应的文字描述（如 "好评"、"优秀" 等）
• 符合 easycom 规范：无需手动导入和注册，直接在页面中使用
• 响应式设计：适配不同设备屏幕尺寸

平台兼容性

uni-app(3.7.6)

其他

rating-pro 组件

一个基于 uni-app 的星级评分组件，支持多种自定义配置和交互方式，提供直观、美观的评分体验。

🚀 功能特点

• 基础展示：显示固定分数（只读模式），支持任意分数值
• 用户打分：点击星星进行打分（可选模式），提供即时反馈
• 半星支持：支持 0.5 分的粒度，并且根据小数部分动态调整填充比例（如 4.1 分填充 10%，4.2 分填充 20%）
• 自定义图标：可替换成自定义图片/图标（如爱心、大拇指等）
• 尺寸颜色：星星大小、颜色、间距可配置，适应不同场景
• 文案辅助：显示评分对应的文字描述（如 "好评"、"优秀" 等）
• 符合 easycom 规范：无需手动导入和注册，直接在页面中使用
• 响应式设计：适配不同设备屏幕尺寸

📦 安装

方式一：直接复制组件文件

1. 将 rating-pro 目录复制到您的 uni-app 项目的 components 目录中
2. 直接在页面中使用 <rating-pro> 标签

📖 使用方法

基本使用

<template>
  <view class="content">
    <rating-pro></rating-pro>
  </view>
</template>

只读模式（显示固定分数）

<template>
  <view class="content">
    <rating-pro :rating="4.5" :readonly="true"></rating-pro>
  </view>
</template>

自定义评分和最大星星数

<template>
  <view class="content">
    <rating-pro :rating="3.4" :max-stars="10"></rating-pro>
  </view>
</template>

监听评分变化

<template>
  <view class="content">
    <rating-pro :rating="rating" @update:rating="handleRatingChange"></rating-pro>
    <text>当前评分：{{ rating }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const rating = ref(3)

const handleRatingChange = (newRating) => {
  rating.value = newRating
  console.log('评分已更新:', newRating)
}
</script>

自定义图标

<template>
  <view class="content">
    <rating-pro :icon="'/static/heart.png'"></rating-pro>
  </view>
</template>

自定义尺寸和颜色

<template>
  <view class="content">
    <rating-pro :size="32" :color="'#ff4444'" :inactive-color="'#ffcccc'" :spacing="8"></rating-pro>
  </view>
</template>

自定义文案

<template>
  <view class="content">
    <rating-pro :labels="['非常差', '差', '一般', '好', '非常好']"></rating-pro>
  </view>
</template>

隐藏文本和标签

<template>
  <view class="content">
    <rating-pro :show-text="false"></rating-pro>
  </view>
</template>

🎨 参数说明

📡 事件说明

🛠️ 技术实现

• CSS 绘制星星：使用 clip-path 属性绘制星星形状，避免使用 Unicode 字符
• 渐变背景：使用线性渐变实现半星效果，保持星星完整
• 动态填充：根据评分的小数部分动态调整半星的填充比例
• 自定义图标支持：使用 mask 属性实现自定义图标的半星效果
• 响应式设计：使用灵活的布局和单位，适配不同屏幕尺寸

🔧 兼容性

• ✅ 支持 H5
• ✅ 支持微信小程序
• ✅ 支持支付宝小程序
• ✅ 支持百度小程序
• ✅ 支持字节跳动小程序
• ✅ 支持 QQ 小程序

🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个组件！

📄 许可证

MIT License

📞 联系

如有问题或建议，请在 GitHub 仓库中提交 Issue。

希望这个组件能为您的项目带来帮助！ ⭐