vue.js如何實(shí)現(xiàn)二級(jí)下拉懸浮菜單

小編給大家分享一下vue.js如何實(shí)現(xiàn)二級(jí)下拉懸浮菜單，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

vue.js實(shí)現(xiàn)二級(jí)下拉懸浮菜單的方法：1、完成鼠標(biāo)懸浮出現(xiàn)新的div的效果；2、實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)個(gè)人頭像到個(gè)人信息的div時(shí)個(gè)人信息的div不消失；3、添加中間變量，在cl_person_info()方法中利用這個(gè)變量進(jìn)行判斷即可。

本文操作環(huán)境：windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。

在實(shí)際的開(kāi)發(fā)項(xiàng)目中我們可能需要實(shí)現(xiàn)類似二級(jí)菜單的功能，如果我們想偷個(gè)懶，那么我們可以直接使用現(xiàn)有的Element UI框架。但是這種方法有個(gè)很大的缺點(diǎn)，我們只有明白了各個(gè)代碼的意思才能夠修改代碼以完成想要的動(dòng)態(tài)效果，所以我們不推薦使用這種方法。

可能有的小伙伴就會(huì)說(shuō)了不是還有jQuery么？沒(méi)錯(cuò)jQuery也可以實(shí)現(xiàn)，但是使用jQuery實(shí)現(xiàn)的話一定需要直接對(duì)DOM進(jìn)行操作，代碼比較復(fù)雜。

那么我們到底該使用哪種方式呢？為什么不去使用v-bind呢？說(shuō)干就干，一起來(lái)看看吧！

首先完成鼠標(biāo)懸浮出現(xiàn)新的div的效果

html部分代碼如下：

<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>個(gè)人設(shè)置</div>
     <div>賬戶中心</div>
     <div>退出登錄</div>
</div>
</template>

//@mouseover、@mouseout和 v-show="person_con" 用來(lái)控制懸浮出現(xiàn)和消失的效果

js部分代碼如下所示：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索課程',
            token:'',//判斷是否登錄的參數(shù)，在加載主頁(yè)時(shí)直接判斷
            person_con:false,
            userid:'',
        }
    },
     methods:{
     person_info(){
        this.person_con = true;
    },
    		
     cl_person_info(){ 
        this.person_con = false;
    },
    
    }
</script>

很簡(jiǎn)單，這樣就實(shí)現(xiàn)了鼠標(biāo)經(jīng)過(guò)個(gè)人頭像（person_img）時(shí)，下面會(huì)出現(xiàn)個(gè)人信息person_con。

下面是關(guān)鍵，怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)個(gè)人頭像到個(gè)人信息的div時(shí)個(gè)人信息的div不消失，繼而進(jìn)行更多的業(yè)務(wù)操作呢？

自然的想法就是給再給person_con加上@mouseover和@mouseout。

接著實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)個(gè)人頭像到個(gè)人信息的div時(shí)個(gè)人信息的div不消失

html部分代碼如下：

<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>個(gè)人設(shè)置</div>
     <div>賬戶中心</div>
     <div>退出登錄</div>
</div>
</template>

js部分代碼如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索課程',
            token:'',//判斷是否登錄的參數(shù)，在加載主頁(yè)時(shí)直接判斷
            person_con:false,
            userid:'',
        }
    },
     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>

到此，還不能實(shí)現(xiàn)完整的功能，因?yàn)楝F(xiàn)在代碼還不完善。為啥？因?yàn)樵谑髽?biāo)移出個(gè)人頭像時(shí)，person_con又變?yōu)閒alse了，這就導(dǎo)致person_infoContinue()和 cl_person_infoContinue()其實(shí)是不起效果的。那又該怎么辦呢？自然的想法就是再添加一個(gè)中間變量，在cl_person_info()方法中，我利用這個(gè)變量進(jìn)行判斷。

js部分代碼如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索課程',
            token:'',//判斷是否登錄的參數(shù)，在加載主頁(yè)時(shí)直接判斷
            person_con:false,
            isperson_infoContinue:false,//增加
            userid:'',
        }
    },
     methods:{
     //不變
     person_info(){
        this.person_con = true;
    },
    //增加判斷
     cl_person_info(){ 
         if(this.isperson_infoContinue = true){
                this.person_con = true;
            }else{
                this.person_con = false;
            }
    },
    //鼠標(biāo)進(jìn)入到新的div時(shí)讓中間變量為true
    person_infoContinue(){
        this.person_con = true;
        this.isperson_infoContinue = true;
    },
    
    cl_person_infoContinue(){
    	this.isperson_infoContinue = false;
        this.person_con = false;
    },
    }
</script>

到此，就利用簡(jiǎn)單的邏輯判斷true和false完成了懸浮二級(jí)菜單的功能。

看完了這篇文章，相信你對(duì)“vue.js如何實(shí)現(xiàn)二級(jí)下拉懸浮菜單”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！