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

一、在开发的过程中会可能会遇到下图这样的评分效果,下面就来看看这种效果用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组件化思想来实现一个星级打分效果。 首先,在组件内部定义一个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、付费专栏及课程。

余额充值