vue-star-rating 只读模式实战5 个场景教你优雅展示静态评分结果【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-rating在 Vue 项目中用vue-star-rating组件展示不可点击、不可修改的静态评分结果是商品详情页、评论区、排行榜里最常见的需求。今天这篇文章就围绕 vue-star-rating 的只读模式read-only通过 5 个实战场景教你如何优雅地展示平均分、历史评分与榜单数据即使你完全没接触过这个评分组件也能轻松上手。为什么需要只读模式vue-star-rating 是一个简单又高度可定制的 Vue 2.x / 3.x 评分组件。它默认是可交互的——用户可以用鼠标点选、划过星级组件会触发评分事件。但在很多页面里评分只是展示给用户看的信息而不是让用户去修改的输入框。比如商品的平均分、用户评价里的星级、排行榜的得分这些数据来自后端前端只需要如实呈现。如果不加任何处理星星会一直悬停变色、出现指针光标甚至被误点击体验非常糟糕。vue-star-rating 专门为此提供了read-only属性一行代码即可切换到只读展示模式。vue-star-rating 只读模式快速上手只需两步安装组件然后给star-rating传三个关键属性。第一步安装npm install vue-star-rating第二步在组件中引入并渲染star-rating :rating4.5 :read-onlytrue :increment0.5/star-ratingrating要展示的评分值比如 4.5read-only设为true即进入只读模式星星不再响应点击与悬停increment评分精度0.5表示半星0.01表示可精确到小数点的流式星级如果你在 Vue 3 中使用注册方式略有不同需要这样绑定组件star-rating v-model:ratingscore :read-onlytrue/star-rating常用展示属性一览属性作用推荐值rating要展示的评分任意数字read-only开启只读模式trueincrement星星填充精度0.5/0.1/0.01max-rating星星总数5/10star-size星星尺寸像素16~90show-rating是否显示数字true/falseinline是否内联显示truefixed-points数字保留几位小数1/2active-color已点亮星星颜色任意色值5 个实战场景静态评分展示方案 场景一商品详情页展示平均评分电商商品页的综合评分是最典型的只读场景。评分来自后端接口用户不能修改但数字希望精确展示比如 4.6 分。star-rating :rating4.6 :read-onlytrue :increment0.1 :round-start-ratingfalse :star-size24 /star-rating这里有个容易被忽略的细节round-start-rating默认为true会把初始评分按 increment 向上取整4.6 会变成 5。想要精确展示小数评分记得像上面这样设为false。场景二评论区展示单条评价星级 ️评论列表里每条评价都带星级星星多、间距小通常不显示数字只显示图形。star-rating :ratingreview.rating :read-onlytrue :show-ratingfalse :star-size16 /star-ratingshow-ratingfalse可以隐藏数字star-size16让星星更小巧适合在信息流中批量渲染。场景三搜索结果与排行榜的迷你评分 榜单或搜索结果中评分常与文字混排在一行此时需要把星星设为内联模式并缩小尺寸Rated star-rating :inlinetrue :star-size14 :read-onlytrue :show-ratingfalse :rating5 /star-rating by our customers.这个写法在项目的官方示例 examples/index.html 中就有现成的参考inline属性会让星星组件和周围的文字排在同一行。场景四个人中心展示历史评分记录 用户中心里展示我打过的分通常希望星级旁边带上精确到两位小数的数字star-rating :ratinguserRating :read-onlytrue :increment0.01 :fixed-points2 :star-size20 /star-ratingfixed-points2可以让评分数字固定显示两位小数如 4.35配合increment0.01星星填充也能准确对应到小数位。场景五运营后台与报表的评分概览 后台管理页里评分需要更醒目的视觉表达可以自定义颜色和星星数量star-rating :rating8.5 :read-onlytrue :max-rating10 :star-size28 active-color#ff6b35 inactive-color#e9ecef /star-ratingmax-rating支持 10 星制active-color与inactive-color可自定义点亮与未点亮的颜色适合做数据看板。只读模式的实现细节它到底做了什么看懂原理你才能放心使用。在源码 star-rating.vue 中只读模式下星星不会添加vue-star-rating-pointer光标类所以鼠标移上去不会变成小手更关键的是setRating与resetRating方法都通过if (!this.readOnly)判断见 star-rating.vue因此只读模式不会触发任何评分事件用户再怎么点都不会改动数据。项目的单元测试也验证了这一点star-rating.spec.js 中明确断言——只读模式下点击星星不会触发update:rating鼠标划过不会触发hover:rating。这意味着你可以放心地把只读评分放在任何位置无需担心误操作。另外组件还内置了无障碍支持screen reader默认会朗读 Rated 4.5 stars out of 5视力障碍用户也能感知评分内容。常见问题速查 ❓Q只读模式会不会触发update:rating事件不会。只读模式下所有评分事件都会被拦截这也是它在源码中的硬性保证。Q为什么我传了rating4.6却显示了 5 颗满星因为round-start-rating默认向上取整传:round-start-ratingfalse即可显示精确值。Q只想要星星不想要数字设置:show-ratingfalse即可。Qvue-star-rating 只读模式和普通模式可以混用吗当然可以。同一页面里展示区用只读模式、评分区用可交互模式两者互不干扰。写在最后 ✨vue-star-rating 的只读模式虽然只是一个布尔属性但搭配increment、round-start-rating、fixed-points、inline等属性足以覆盖商品详情、评论区、榜单、个人中心、数据报表等绝大多数静态评分展示场景。下次再遇到只展示不交互的评分需求记得先想起它。想要快速跑起来看效果直接克隆仓库运行npm install和npm run serve官方示例里已包含了只读星星examples/index.html的现成演示。【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-rating创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考