Cara melaksanakan menu terapung lungsur kedua dalam vue.js

Kaedah Vue.js untuk melaksanakan menu terapung lungsur kedua: 1. Lengkapkan kesan div baharu yang muncul apabila tetikus dilegar; 2. Sedar bahawa div maklumat peribadi tidak hilang apabila tetikus menyerahkan avatar peribadi kepada div maklumat peribadi 3. Tambah pembolehubah perantaraan dan gunakan pembolehubah ini untuk membuat pertimbangan dalam kaedah cl_person_info().

Persekitaran pengendalian artikel ini: sistem windows10, vue 2.5.2, komputer thinkpad t480.

Dalam projek pembangunan sebenar, kita mungkin perlu melaksanakan fungsi yang serupa dengan menu sekunder Jika kita mahu malas, maka kita boleh terus menggunakan rangka kerja UI Elemen yang sedia ada. Walau bagaimanapun, kaedah ini mempunyai kelemahan yang besar Hanya dengan memahami maksud setiap kod kita boleh mengubah suai kod untuk mencapai kesan dinamik yang diingini, jadi kami tidak mengesyorkan kaedah ini.

Sesetengah rakan mungkin bertanya, bukankah terdapat jQuery? Ya, jQuery juga boleh dilaksanakan, tetapi jika anda menggunakan jQuery untuk melaksanakannya, anda mesti mengendalikan DOM secara langsung, dan kod itu lebih rumit.

Jadi kaedah manakah yang patut kita gunakan? Mengapa tidak menggunakan v-bind? Buat sahaja, mari lihat!

Lengkapkan dahulu kesan div baharu yang muncul apabila tetikus dilegar

Bahagian html kod adalah seperti berikut:

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>

<div v-show="person_con" class="hidden_div" >
     <div>{{userid}}</div>
     <div>个人设置</div>
     <div>账户中心</div>
     <div>退出登录</div>
</div>
</template>

//@mouseover、@mouseout和 v-show="person_con" 用来控制悬浮出现和消失的效果

Bahagian js bagi kod adalah seperti berikut:

<script>
name:&#39;&#39;,
    data(){
        return{
            placeholder:&#39;搜索课程&#39;,
            token:&#39;&#39;,//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            userid:&#39;&#39;,
        }
    },
     methods:{
     person_info(){
        this.person_con = true;
    },
    		
     cl_person_info(){ 
        this.person_con = false;
    },
    
    }
</script>

Dengan cara ini, apabila tetikus melepasi avatar peribadi (person_img), maklumat peribadi person_con akan muncul di bawah.

Berikut ialah kunci bagaimana untuk memastikan bahawa div maklumat peribadi tidak hilang apabila tetikus melepasi avatar peribadi ke div maklumat peribadi, supaya lebih banyak operasi perniagaan boleh dilakukan?

Idea semula jadi ialah menambahkan @mouseover dan @mouseout pada person_con.

Kemudian sedar bahawa div maklumat peribadi tidak hilang apabila tetikus menghantar avatar peribadi ke div maklumat peribadi

Bahagian html kod adalah seperti berikut:

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>
 
//新增@mouseover和@mouseout
<div v-show="person_con" class="hidden_div" @mouseover="person_infoContinue()" @mouseout="cl_person_infoContinue()" >
     <div>{{userid}}</div>
     <div>个人设置</div>
     <div>账户中心</div>
     <div>退出登录</div>
</div>
</template>

Bahagian js kod adalah seperti berikut:

<script>
name:&#39;&#39;,
    data(){
        return{
            placeholder:&#39;搜索课程&#39;,
            token:&#39;&#39;,//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            userid:&#39;&#39;,
        }
    },
     methods:{
     person_info(){
        this.person_con = true;
    },
    		
     cl_person_info(){ 
        this.person_con = false;
    },
    
    person_infoContinue(){
        this.person_con = true;
    },
    
    cl_person_infoContinue(){
        this.person_con = false;
    },
    }
</script>

Pada ketika ini, fungsi lengkap tidak dapat direalisasikan kerana kod itu belum sempurna lagi. kenapa? Kerana apabila tetikus dialihkan keluar daripada avatar peribadi, person_con menjadi palsu semula, yang mengakibatkan person_infoContinue() dan cl_person_infoContinue() sebenarnya tidak mempunyai kesan. Jadi apa yang patut kita buat? Idea semula jadi adalah untuk menambah satu lagi pembolehubah perantaraan Dalam kaedah cl_person_info(), saya menggunakan pembolehubah ini untuk membuat pertimbangan.

Bahagian js kod adalah seperti berikut:

<script>
name:&#39;&#39;,
    data(){
        return{
            placeholder:&#39;搜索课程&#39;,
            token:&#39;&#39;,//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            isperson_infoContinue:false,//增加
            userid:&#39;&#39;,
        }
    },
     methods:{
     //不变
     person_info(){
        this.person_con = true;
    },
    //增加判断
     cl_person_info(){ 
         if(this.isperson_infoContinue = true){
                this.person_con = true;
            }else{
                this.person_con = false;
            }
    },
    //鼠标进入到新的div时让中间变量为true
    person_infoContinue(){
        this.person_con = true;
        this.isperson_infoContinue = true;
    },
    
    cl_person_infoContinue(){
    	this.isperson_infoContinue = false;
        this.person_con = false;
    },
    }
</script>

Pada ketika ini, fungsi mengapungkan menu sekunder diselesaikan dengan menggunakan logik mudah untuk menentukan benar dan salah.

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Cara melaksanakan menu terapung lungsur kedua dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!