vue 实现评价功能

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.图片

 

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

ps：眯眯眼的都是怪物