选星星组件

组件

<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