vue 实现评价功能

vue 同时被 3 个专栏收录
13 篇文章 0 订阅
29 篇文章 0 订阅
14 篇文章 0 订阅
  1. html 代码
<div class="star-48" id="deliveryStar">
		<span class="on" :id="'deliveryStar'+index" @click="setPF('deliveryStar',index)" v-for="(deliveryStar,index) in starCount" :key="'deliveryStar'+index"></span>
</div>



 2.css

.star-48 span {
		/*大小为48的星星大小*/
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		margin-right: .4rem;
	}
	
	.star-48 span:last-child {
		margin-right: 0;
	}
	
	.star-48 .on {
		background: url("../../assets/images/icon/orderV_iocn_selected.png") no-repeat;
		background-size: 1.5rem 1.5rem;
	}
	
	.star-48 .off {
		background: url("../../assets/images/icon/orderV_iocn_unselect@2x.png") no-repeat;
		background-size: 1.5rem 1.5rem;
	}

3.js

setPF(PFbox, val) {
				var that = this; 
				var curent_value = 0; //临时评分 由span的class='on' 确定分数
				var allbox = document.getElementById(PFbox).getElementsByTagName('span'); //获取当前div下的所有的span				
				var classfiy = document.getElementById(PFbox + val); //获取当前星星的状态		on 选中 off 未选中				
				if(classfiy.className == 'on') { //当前星星状态 on 将当前星星之后的改为off
					for(var i = 0, j = allbox.length; i < j; i++) {
						if(i > val && i != 0) {
							allbox[i].className = 'off'
						}
						if(allbox[i].className == 'on') {
							curent_value++;
						}
					}
				} else { //当前星星状态 off 将当前星星之前的改为on
					for(var i = 0, j = allbox.length; i < j; i++) {
						if(i < val || i == val) {
							allbox[i].className = 'on'
						}
						if(allbox[i].className == 'on') {
							curent_value++;
						}
					}
				}
                //设置分数
				if(PFbox == 'shopStar') {
					that.shopPoint = curent_value;
				}
				
				
			}

4.图片

星星 星星2

可以用于一个界面多个评论项 (-_-)

ps:眯眯眼的都是怪物

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值