<template>
<div >
<div class="start">
<span class="img_box">
<img :src="starNum>=1?start_show:start_hide" @click="change_star(1)">
</span>
<span class="img_box">
<img :src="starNum>=2?start_show:start_hide" @click="change_star(2)">
</span>
<span class="img_box">
<img :src="starNum>=3?start_show:start_hide" @click="change_star(3)">
</span>
<span class="img_box">
<img :src="starNum>=4?start_show:start_hide" @click="change_star(4)">
</span>
<span class="img_box">
<img :src="starNum>=5?start_show:start_hide" @click="change_star(5)">
</span>
</div>
</div>
</template>
<style scoped>
.img_box img{
width:1.75rem;
height:1.75rem;
margin-right:4px;
margin-top:4px;
}
</style>
<script>
export default {
props: {
starNum: Number,
},
beforeCreate: function() {
},
watch: {
starNum (val) {
this.starNum = val
}
},
data () {
return {
start_show:'http://weixin.evledm.com/fte-questionnaire-201808/star_on.png',
start_hide:'http://weixin.evledm.com/fte-questionnaire-201808/star_off.png',
}
},
created: function() {
},
mounted:function(){
},
methods: {
change_star(index){
this.$emit('star_num1',index);
this.$emit('star_num2',index);
this.$emit('star_num3',index);
this.$emit('star_num4',index);
this.$emit('star_num5',index);
this.$emit('star_num6',index);
},
error (msg) {
this.$Message.error(msg);
}
}
}
</script>
调用
<star :starNum="star1" :index="1" @star_num1 = "star_num1" ></star>
methods: {
star_num1(id){
this.star1=id;
this.check_star();
},
}```
本文地址:https://blog.csdn.net/qq_26388781/article/details/112507569