仿制element-ui的Rate评分组件

试着仿制了一下element-ui的Rate评分组件，废话不多说，直接上效果图

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rate评分，带辅助文字</title>
<style>
	.rateWrap{
		display: inline-block;
		margin:100px;
		font-size: 0;
	}
	.rateText{
		display:inline-block;
		height:22px;line-height:22px;
		margin-left:8px;
		font-size: 12px;
	}
	.rate{
		display:inline-block;
		--rate-size:18px;
		--rate-padding:2px;
	}
	.rate>div{
		display: inline-block;
	}
	.star{
		padding: var(--rate-padding);
		width:var(--rate-size);height:var(--rate-size);
	}
	
	/* 浮动 */
	.f-cb{
		float: left;
	}
	.f-cb:after{
		display:block;
		clear:both;
		overflow:hidden;
		content:'';
	}
</style>
</head>
<body>
	<div class='rateWrap'>
		<div class='rate f-cb'>
			<div><img src='./images/favor.png' class='star' data-flag='0'></div>
			<div><img src='./images/favor.png' class='star' data-flag='1'></div>
			<div><img src='./images/favor.png' class='star' data-flag='2'></div>
			<div><img src='./images/favor.png' class='star' data-flag='3'></div>
			<div><img src='./images/favor.png' class='star' data-flag='4'></div>
		</div>
		<div class='rateText'></div>
	</div>
	
<script>
let addEvent = document.addEventListener ?
	(elem,type,listener,useCapture)=>{
		elem.addEventListener(type,listener,useCapture);
	}	:
	(elem,type,listener,useCapture)=>{
		elem.attachEvent('on'+type,listener);
	};
let $ = selector=>{
	return [].slice.call(document.querySelectorAll(selector));
};
let stars = $('.star');
let oRateText = $('.rateText')[0];
let oRate = $('.rate.f-cb')[0];
let starImg = './images/favor.png';
let starImgActive = './images/favor_fill.png';

// 将事件注册到父标签上
addEvent(oRate,'click',(ev)=>{
	let flag = Number.parseInt(ev.target.dataset.flag);
	let flagText = '';
	switch(flag){
		case 0:flagText='极差';break;
		case 1:flagText='失望';break;
		case 2:flagText='一般';break;
		case 3:flagText='满意';break;
		case 4:flagText='惊喜';break;
	}
	oRateText.innerHTML = flagText;
	// console.log('flag:',flag);
	let preStars = stars.slice(0,flag+1);
	// console.log(preStars);
	let sufStars = stars.slice(flag+1);
	// console.log(sufStars);

	for(let preStar of preStars){
		preStar.src = starImgActive;
	}
	for(let sufStar of sufStars){
		sufStar.src = starImg;
	}
});

</script>
</body>
</html>

有不清楚的小伙伴们，可以给我评论留言，我会加以改进的。

仿制element-ui的Rate评分组件

猜你喜欢