VUE实现评分效果和不同类型分数展示效果组件

最新推荐文章于 2024-09-04 17:18:19 发布
最新推荐文章于 2024-09-04 17:18:19 发布
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 人工智能 ViewUI
原文链接：https://yq.aliyun.com/articles/657702

一、在开发的过程中会可能会遇到下图这样的评分效果,下面就来看看这种效果用vue如何实现

效果图

img_c28ff381ad143471624e726606532a60.jpe
图片发自简书App

HTML部分

img_bcf5c1928c22353ed79391ff3b3b08b5.jpe
图片发自简书App

CSS部分

img_34de4f0afa7d10a12722dc706da9241c.jpe
图片发自简书App

JS部分

img_df7656f9541a89dced6966185f06c2d2.jpe
图片发自简书App

二、项目的开发过程，经常会遇到评价分数的展示，下边我们就来实现以下，不同类型不同大小，可以在任意使用的分数展示的vue组件，计算属性来动态添加不同的样式。

当时4.8分的时候展示效果如下

img_c28ff381ad143471624e726606532a60.jpe

只要应用的技术是vue中的computed来计算属性，根基不同的属性添加不同的类，代码实现如下

html结构

img_8512abbd1c042f7bc1ff0e361368af94.png

css样式

img_a5e8763214e72425870bb2a66596d864.png

js中的属性计算（重点）

根据size跟score的值的不同来计算添加哪一个样式

img_a3adc466004824b05773dcdb3661f5ca.png
vue 星星评分组件
知行
04-10 1123
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件，功能没有写全 主体结构： .scoreLayer(v-show="isShowScore" @click="hideScoreLayer($event)") .center-box .star-box.flex-between ul...
Vue基础案例-成绩显示
qq_45387575的博客
09-12 2587
Vue成绩展示
vue实现简单的星级评分组件
10-17
主要介绍了vue星级评分组件源码,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-star评星组件开发
xiaowei的博客
06-06 5691
star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护 Star.vue：<template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
vue星级评分组件
weixin_30399821的博客
07-02 188
<template> <div class="Rating-gray"> <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i> </div> </template> <script> /...
Vue动态实现评分效果
08-30
Vue动态实现评分效果 Vue框架是目前最流行的前端...使用Vue动态实现评分效果非常简单，只需要使用计算属性和CSS样式就可以实现实用的评分效果。这种技术可以广泛应用于各种评分系统中，提高用户体验和系统的实用性。
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
12-07
在微信小程序中，为了实现店铺评分或商品评价的星星展示功能，开发者经常会遇到需要创建一个评分组件。这个组件不仅需要美观，还需要能够适应不同分数的显示，例如精确到半星。由于微信小程序本身不支持直接使用SVG...
微信小程序之店铺评分组件及vue中用svg实现的评分显示组件
ZJW222的博客
11-15 678
在微信小程序中，有遇到要展示店铺评分，或者是订单完成后对商品进行评价，用到了星星展示，查了下，在微信中无法使用svg实现图片，微信中只能将svg图片转成base64来显示，所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示，但是，显示的话，在4.2分，4点多分的时候，显示的是半颗星vue中用的是svg实现，所以用的是占比的形式,可以有一点点的星 2.微信实现...
vue.js 实现评价五角星组件的实例代码
10-18
本文介绍了如何使用Vue.js框架实现一个评价五角星组件，这个组件通过接收外部的`size`和`score`属性，可以动态地展示不同的评分情况和大小。组件内部实现了一个计算属性来动态确定每个星星的状态，并定义了多种样式...
Vue 星级评分组件
weixin_43294092的博客
05-28 1693
Vue 星级评分组件 描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctrl + V。别人还在苦苦加班写东西的时候，你已经开开心心下班，该干嘛干嘛去了...
Vue微型项目（七）—— 评分组件
Claire_Moon的博客
08-28 520
在前面的几篇文章中，我们实现的基本效果如下 接下来，我们添加项目中的其他组件，先来看看评分组件怎么添加吧 添加评分组件 一. 抽离评分组件Rating.vue 考虑到评分这个部分，在以后的项目文件中应该经常用到，所以我们在这里把评分组件抽离出来，为Rating.vaue ...
vue自定义评分组件
m0_62835220的博客
06-08 702
element评分组件con没有合适，自己写了一个评分组件。
vue2 引入MathJax 输入数学算式，显示分式（分数）
zhen_cyx的博客
07-04 1839
记录一下。
vue星星评分组件_一个简单且高度可定制的Vue星级评分组件
cuk5239的博客
07-26 2764
vue星星评分组件 Vue 2.x的星级评定组件 (Star Rating Component for Vue 2.x) Need more than stars? Check out vue-rate-it with hundreds of different raters built in! 需要更多星星吗？ 查看vue-rate-it，其中内置了数百种不同的评估者！ A simple, ...
vue评分组件|awesome-vue-star-rating
delmarks的博客
02-13 1116
awesome-vue-star-rating是一款纯vue评分插件，它可以自定义的评分和评分说明，自定义的星数等，简单易用。
简单易用评分组件vue-stars
最新发布
xuweilin的博客
09-04 959
类型：Vue.js组件功能：实现星级评分、满意度评价等特点：高度可定制化，支持v-model双向绑定，支持自定义图标样式vue-stars是一个功能强大、易于使用且高度可定制化的Vue.js评分控制组件。它支持v-model双向绑定和自定义图标样式等特性，可以方便地实现星级评分、满意度评价等功能。在开发过程中，开发者可以根据实际需求进行定制和扩展，以满足不同的应用场景需求。
VUE星星评分插件
程序员劝退师的博客
01-06 1172
这篇文章算得上是完善同行的文章，原文中代码没问题，但是缺少依赖，导致无法出现星星评分效果！完善后的效果如下！ 原作者文章链接vue 星星(共5分)评分，还有一篇文章估计也是同样的问题vue 星星评分组件这篇文章功能更强大一些，我这里只对第一篇文章做了完善，第二篇应该也是同样的问题！代码复制上去后无法显示星星，lou了一眼代码发现使用了fa-star这些玩意！顺个藤摸个瓜到了这里 ok，到了这里就明白了！ 编写星星评分组件 <template> <div class="Ratin
基于vue编写的一个星星评分组件
hejianghaoswu的博客
08-25 1181
由于在写一个项目时候，遇到了要给服务进行评分的需求，所以写了一个星星评分组件，其效果如下： 实现代码如图所示： <template> <div> <ul ref="star"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li&
Vue精简代码实现评分组件
Jerry的博客
06-10 1621
写在前面 组件还是自己写来的好，网上的一些评分组件都太过复杂，自己写的代码很精简，就能达到想要的功能，可以点击也可以禁止点击，可以展示全星、灰星、半星！ 效果图 组件代码 <template> <div class="star"> // 用于父子组件双向绑定 <input type="hidden" v-model="value"> ...
vue实现一个星级打分效果_vue 星星评分组件
05-16
可以使用vue的组件化思想来实现一个星级打分效果。 首先，在组件内部定义一个data属性，用来存储当前评分的分数。然后，在模板中使用循环语句来渲染五个星星，并根据当前分数来决定星星的颜色。 接着，为每个星星添加鼠标移入、移出、点击事件，用来改变当前分数并触发相应的回调函数。 最后，把组件封装成一个单独的.vue文件，可以在其他组件中引用。 下面是一个简单的例子： ```html <template> <div class="star-rating"> <span v-for="n in 5" :key="n" class="star" :class="{ 'filled': n <= currentRating }" @mouseenter="hoverRating(n)" @mouseleave="hoverRating(0)" @click="setRating(n)"> ★ </span> </div> </template> <script> export default { data() { return { currentRating: 0 } }, methods: { hoverRating(rating) { this.currentRating = rating }, setRating(rating) { this.currentRating = rating this.$emit('rating-changed', rating) } } } </script> <style> .star-rating { display: inline-block; font-size: 2em; width: 5em; text-align: center; } .star { color: #ccc; cursor: pointer; } .filled { color: gold; } </style> ``` 在父组件中，可以通过监听子组件的`rating-changed`事件来获取当前评分的分数，如下所示： ```html <template> <div> <star-rating @rating-changed="handleRatingChanged"></star-rating> <p>You rated this item {{ rating }} stars.</p> </div> </template> <script> import StarRating from './StarRating.vue' export default { components: { StarRating }, data() { return { rating: 0 } }, methods: { handleRatingChanged(rating) { this.rating = rating } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值