<template>
    <div>
        <div class="box">
            <ul>
                <li v-for="(item,index) in lists" :key="item.src" :class="{active:item.isActive}"
                @mouseover="handleOver(item,index)"
                @mousemove="handleMove"
                @mouseout="handleOut"
                >
                    <img :src="item.src">
                </li>
            </ul>
        </div>
        <div class="big"  v-show="show" ref="myBig">
            <div v-show="bigShow"></div>            
        </div>
    </div>
</template>
<script>
export default {
    name:‘Navs‘,
    data(){
        return{
            show:false,
            bigShow:false,            
            lists:[
                {src:require(‘../assets/lesson5/shirt_1.jpg‘), isActive:false},
                {src:require(‘../assets/lesson5/shirt_2.jpg‘), isActive:false},
                {src:require(‘../assets/lesson5/shirt_3.jpg‘), isActive:false},
                {src:require(‘../assets/lesson5/shirt_4.jpg‘), isActive:false},
            ],
            bigList:[
                {src:require(‘../assets/lesson5/shirt_1_big.jpg‘)},
                {src:require(‘../assets/lesson5/shirt_2_big.jpg‘)},
                {src:require(‘../assets/lesson5/shirt_3_big.jpg‘)},
                {src:require(‘../assets/lesson5/shirt_4_big.jpg‘)},
            ]
        }
    },    
    methods:{
        handleOver(item,index){
            var oImg=document.createElement(‘img‘);
            var img= new Image();
            img.src=oImg.src=this.bigList[index].src;
            this.$refs.myBig.appendChild(oImg);
            this.lists[index].isActive=true;
            this.show=this.bigShow=true;
            img.complete ? this.bigShow=false : ‘‘
        },
        handleMove(){
            var newWidth= document.documentElement.offsetWidth - event.clientX;
            this.$refs.myBig.style.top=event.clientY + 20 + ‘px‘;
            this.$refs.myBig.style.left = (newWidth < this.$refs.myBig.offsetWidth + 10 ? event.clientX - this.$refs.myBig.offsetWidth - 10 : event.clientX + 10) + ‘px‘;
        },
        handleOut(){
            this.show=false;
            this.$refs.myBig.removeChild(this.$refs.myBig.lastChild)
        }
    }
}
</script>