上图:
<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>
-->