vue realizes magnifying glass function of commodity details page

In this article, we share the specific code of vue to realize the magnifying glass of commodity details page for your reference. The specific contents are as follows

Content in templates

<div class="productLeft">
   <!--  Middle left  -->
     <div class="mdImg">
         <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt="">
     </div>
     <!--  Mask layer  -->
     <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></ div>
     <!--  Mask layer   Glass plate  superMarks-->
     <div @mouseenter="enter" @mouseleave="leave"  @mousemove="marks" class="superMarks" ></div>
     <!-- Small picture on the left  -->
     <div class="smImg" >
         <!-- Left button  -->
         <div @click="prev" class="button-prev">
             <img src="../assets/icon/prev.png" >
         </div>
         <div class="smImgUl">
             <ul :style="{'margin-left':marginLeft+'px'}">
                 <li @mouseenter="enterLi(index)" v-for="(item,index) of list" :key="index">
                     < img :src="require('../assets/imgs/details/'+item.sm)" alt="">
                 </li>
             </ul>
         </div>
         <!--  Right button  -->
         <div @click="next" class="button-next">
             <img src="../assets/icon/next.png" >
         </div>
     </div>
    <!--  Large picture on the left  -->
     <div v-show="isShow" class="lgImg">
         <img :src="require('../assets/imgs/details/'+lgImgUrl)" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}">
     </ div>
</div>

js:

< script>
import headerT from "./common/headerT.vue"
import header from "./common/Header.vue"
export default {
    data() {
        return {
            list:[{"sm":"s1.png","md":"s1.png","lg":"s1.png"},
            {"sm":"s2.png","md":"s2.png","lg":"s2.png"},
            {"sm":"s3.png","md":"s3.png","lg":"s3.png"},
            {"sm":"s4.png","md":"s4.png","lg":"s4.png"},
            {"sm":"s5.png","md":"s5.png","lg":"s5.png"},
            {"sm":"s6.png","md":"s6.png","lg":"s6.png"},
            {"sm":"s7.png","md":"s7.png","lg":"s7.png"},
            {"sm":"s8.png","md":"s8.png","lg":"s8.png"}],
            mdImgUrl:"s1.png",
            lgImgUrl:"s1.png",
            ulIndex:0,// Move a few to the left li
            marginLeft:0,  // Distance to move left and right 
            isShow:false,   // Control mask layer marks And whether the large picture is displayed "
            left:0,       //marks Left shift position 
            top:0,         //marks Move down position 
            leftLgImg:0,       // Big picture lgImg Moving position 
            topLgImg:0         // Big picture lgImg Moving position 
        }
    },
    methods: {
        // Event when the mouse enters the small picture, and the corresponding middle picture is displayed 
        enterLi(e){
            //e Is the corresponding subscript 
            //console.log(e);
            this.mdImgUrl=this.list[e].md;
            this.lgImgUrl=this.list[e].lg;
        },

        // Click the left and right buttons to event ul Adj. li Moving , Each li Width 74px , ul Width 370 Display 5 A li
        prev(){
            // Move to the left -
            if(this.ulIndex>-(this.list.length-5)){
                this.ulIndex--;
                this.marginLeft=this.ulIndex*74;
                //console.log(this.ulIndex)
            }
        },
        next(){
            // Move to the right ++
            if(this.ulIndex<0){
                 this.ulIndex++;
                this.marginLeft=this.ulIndex*74;
                //console.log(this.ulIndex)
            }
        },
        
        // Mouse entry and exit 
        enter(){
            this.isShow=true
        },
        leave(){
            this.isShow=false
        },
        // Mask magnifier 
        marks(e){
            //console.log(e.offsetX,e.offsetY)   // Position when the mouse moves in 
            var marksWidth=200;//marks Width of 
            var marksHeight=200;//marks The height of 
            

            this.left=e.offsetX-marksWidth/2;   
            this.top=e.offsetY-marksHeight/2;
            //console.log(this.left,this.top) 
            if(this.left<0){
                this.left=0;
            }else if(this.left>250){
                this.left=250;
            }
            if(this.top<0){
                this.top=0;
            }else if(this.top>250){
                this.top=250;
            }
            //console.log(this.left,this.top) 
            
            // Picture in div Width and height 450 , big picture div Width and height 800
            this.leftLgImg=-this.left*800/450;
            this.topLgImg=-this.top*800/450;
        }
    },
    computed: {
    },
    components:{
        "headerone":headerT,
        "headertwo":header
    },
    watch: {
    },
}
</ script>

CSS:

<style scoped>

    .content{
        width:1200px;
        margin:0 auto;
    }
    .content>.product{
        display: flex;
        justify-content: space-between;
    }
    /*  Left Size Style  */
    .productLeft{
        width:450px;
        position: relative;
    }
    /*  Middle left  */
    .mdImg,.mdImg>img{
        width:450px;
        height:450px;
    }
    /* Mask layer superMarks */
    .superMarks{
        width:450px;
        height:450px;
        background-color:rgba(220, 220, 220, 0);
        position:absolute;
        top:0px;
        left:0px;
    }
    /*  Mask layer  */
    .marks{
        width:200px;
        height:200px;
        position:absolute;
        background-color:rgba(220, 220, 220, 0.5);
        /*top:0px;  // Inline sets the dynamic top , left
        left:0px;*/
    }
    /*  Small picture on the left  */
    .smImg{
        display:flex;
        align-items: center;
        justify-content: space-between;
        overflow:hidden;
    }
    .smImgUl{
        overflow:hidden;
        width:370px;
    }
    .smImg ul{
        display: flex;
        width:370px;
        margin:0;
        padding:0;
    }
    .smImg ul>li{
        padding:0 3px;
    }
    .smImg img{
        height:60px;
        margin:4px;
    }
    /*  Hide the big picture on the left  */
    .lgImg{
        width:400px;
        height:400px;
        overflow: hidden;
        position:absolute;
        top:0px;
        left:450px;
        border:2px solid #aaa;
        background-color:#fff;
    }
    .lgImg img{
        width:800px;
        height:800px;
        position:absolute;
        /*top:100px;
        left:100px;*/
    }

    /* product Right side  */
    .productRight{
        width:700px;
        
    }
    /*  Left and right buttons  */
    .button-prev,.button-next{
        width:35px;
        height:35px;
        line-height: 30px;
        border:1px solid #ddd;
        border-radius:50%;
        text-align:center;
    }
    .button-prev:hover,.button-next:hover{
        background-color:#eee;
    }
    .button-prev>img,.button-next>img{
        width:20px;
        height:20px;
    }
</style>