vue.js如何實現二級下拉懸浮菜單

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

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

本文操作環境：windows10系統、vue 2.5.2、thinkpad t480電腦。

在實際的開發項目中我們可能需要實現類似二級菜單的功能，如果我們想偷個懶，那么我們可以直接使用現有的Element UI框架。但是這種方法有個很大的缺點，我們只有明白了各個代碼的意思才能夠修改代碼以完成想要的動態效果，所以我們不推薦使用這種方法。

可能有的小伙伴就會說了不是還有jQuery么？沒錯jQuery也可以實現，但是使用jQuery實現的話一定需要直接對DOM進行操作，代碼比較復雜。

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

首先完成鼠標懸浮出現新的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>個人設置</div>
     <div>賬戶中心</div>
     <div>退出登錄</div>
</div>
</template>

//@mouseover、@mouseout和 v-show="person_con" 用來控制懸浮出現和消失的效果

js部分代碼如下所示：

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

很簡單，這樣就實現了鼠標經過個人頭像（person_img）時，下面會出現個人信息person_con。

下面是關鍵，怎么實現鼠標經過個人頭像到個人信息的div時個人信息的div不消失，繼而進行更多的業務操作呢？

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

接著實現鼠標經過個人頭像到個人信息的div時個人信息的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>個人設置</div>
     <div>賬戶中心</div>
     <div>退出登錄</div>
</div>
</template>

js部分代碼如下：

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

到此，還不能實現完整的功能，因為現在代碼還不完善。為啥？因為在鼠標移出個人頭像時，person_con又變為false了，這就導致person_infoContinue()和 cl_person_infoContinue()其實是不起效果的。那又該怎么辦呢？自然的想法就是再添加一個中間變量，在cl_person_info()方法中，我利用這個變量進行判斷。

js部分代碼如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索課程',
            token:'',//判斷是否登錄的參數，在加載主頁時直接判斷
            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;
            }
    },
    //鼠標進入到新的div時讓中間變量為true
    person_infoContinue(){
        this.person_con = true;
        this.isperson_infoContinue = true;
    },
    
    cl_person_infoContinue(){
    	this.isperson_infoContinue = false;
        this.person_con = false;
    },
    }
</script>

到此，就利用簡單的邏輯判斷true和false完成了懸浮二級菜單的功能。

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