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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網頁空間、營銷軟件、網站建設、平遙網站維護、網站推廣。

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

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

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

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

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

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

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

js部分代碼如下所示：

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

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

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

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

接著實現(xiàn)鼠標經過個人頭像到個人信息的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:'',//判斷是否登錄的參數(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>

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

js部分代碼如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索課程',
            token:'',//判斷是否登錄的參數(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;
            }
    },
    //鼠標進入到新的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如何實現(xiàn)二級下拉懸浮菜單”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：vue.js如何實現(xiàn)二級下拉懸浮菜單
轉載源于：http://aaarwkj.com/article14/iipcde.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、全網營銷推廣、網站策劃、響應式網站、網站內鏈、搜索引擎優(yōu)化

廣告

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