原创

uni-app 自定义星级评价分数组件

温馨提示：

本文最后更新于 2025年03月20日，已超过 13 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

说明

评分点星组件在移动端是常见的交互控件，常用于商品评价、服务满意度调查等场景。

UniApp 支持通过 Vue.js 语法快速开发自定义评分组件，既能复用官方 uni-rate 的功能特性，也能根据业务需求实现高度定制化设计。相较于原生组件，自定义方案在主题样式、动画效果、数据联动等方面具有更强的灵活性。

示例：

如上图，定义四个星星⭐️图标，在后面给其分数及等级文字显示占位；并在每个星星⭐️上加上点击事件，分别传参对应分数或等级。代码如下：

对应脚本如下，实现点击方法，在点击方法内设置评分展示文字及星星显示样式，代码如下：

对应样式如下：

最后，我们在需要使用的地方引入组件即可，代码如下：

<star @grade="incomeGrade" />
import star from "@/components/star/star.vue";

这样，我们点击星星评分需求就做好了，下次如果还有类似需求如五颗星，我们稍微修改一下对应组件内容即可。

正文到此结束

所属分类：前端

本文标签： uniapp vue3
本文链接： https://www.58cto.cn/article/85
版权声明： 本文由程序言原创发布，非商业性可自由转载、引用，但需署名作者且注明文章出处：程序言》 uni-app 自定义星级评价分数组件 - https://www.58cto.cn/article/85