上图：
<template> <div class="container"> <div v-for="(star,index) in stars" :key="index" style="position: relative"> <img :src="star.img" :style="{'width':(2*width + 'rpx'),'height':(2*height + 'rpx')}"> <div class="left" @click="scoreBtn(1,index)"></div> <div class="right" @click="scoreBtn(2,index)"></div> </div> </div> </template> <script> export default { props:["imgs","width","height","starValue"], data(){ return { stars:[] } }, mounted(){ this.stars = [ {img:this.imgs[0]}, {img:this.imgs[0]}, {img:this.imgs[0]}, {img:this.imgs[0]}, {img:this.imgs[0]} ] }, methods:{ scoreBtn(type,index){ let score = type === 1? (this.starValue /2):this.starValue; this.stars[index].img = type === 1? this.imgs[1]:this.imgs[2]; this.stars.forEach((val,ind)=>{ if(ind < index){ score += this.starValue; val.img = this.imgs[2]; }else if(ind > index) { val.img = this.imgs[0]; } }); this.$emit("ok",score) } } } </script> <style scoped> .container{ display: flex; flex-direction: row } .right{ position: absolute; width: 50%; height: 100%; top: 0; left: 50%; } .left{ position: absolute; width: 50%; height: 100%; top: 0; left: 0; } </style> <!-- 属性 类型 单位 说明 imgs Array 无 imgs为三种状态图片url的数组（注意：数组的顺序为 空心图片url》 半实心图片url 》 实心图片url） width number px 星星的宽度 height number px 星星图片的高度 starValue number 无 每个星星代表分值 ok method 无 打分后的回调，返回一个分值 距离： <score :imgs="imgs" :width="width" :height="height" :starValue="starValue" @ok="back"></score> -->
转载于:https://www.cnblogs.com/changyaoself/p/9662646.html
相关资源：数据结构—成绩单生成器