小編給大家分享一下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如何實現二級下拉懸浮菜單”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

文章題目：vue.js如何實現二級下拉懸浮菜單
轉載源于：http://vcdvsql.cn/article14/iipcde.html

成都網站建設公司_創新互聯，為您提供企業建站、全網營銷推廣、網站策劃、響應式網站、網站內鏈、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯