vue.js實現(xiàn)二級下拉懸浮菜單的方法：1、完成鼠標(biāo)懸浮出現(xiàn)新的div的效果；2、實現(xiàn)鼠標(biāo)經(jīng)過個人頭像到個人信息的div時個人信息的div不消失；3、添加中間變量，在cl_person_info()方法中利用這個變量進(jìn)行判斷即可。
在實際的開發(fā)項目中我們可能需要實現(xiàn)類似二級菜單的功能，如果我們想偷個懶，那么我們可以直接使用現(xiàn)有的Element UI框架。但是這種方法有個很大的缺點，我們只有明白了各個代碼的意思才能夠修改代碼以完成想要的動態(tài)效果，所以我們不推薦使用這種方法。
可能有的小伙伴就會說了不是還有jQuery么？沒錯jQuery也可以實現(xiàn)，但是使用jQuery實現(xiàn)的話一定需要直接對DOM進(jìn)行操作，代碼比較復(fù)雜。
那么我們到底該使用哪種方式呢？為什么不去使用v-bind呢？說干就干，一起來看看吧！
首先完成鼠標(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>個人設(shè)置</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)了鼠標(biāo)經(jīng)過個人頭像（person_img）時，下面會出現(xiàn)個人信息person_con。
下面是關(guān)鍵，怎么實現(xiàn)鼠標(biāo)經(jīng)過個人頭像到個人信息的div時個人信息的div不消失，繼而進(jìn)行更多的業(yè)務(wù)操作呢？
自然的想法就是給再給person_con加上@mouseover和@mouseout。
接著實現(xiàn)鼠標(biāo)經(jīng)過個人頭像到個人信息的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>個人設(shè)置</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)在代碼還不完善。為啥？因為在鼠標(biāo)移出個人頭像時，person_con又變?yōu)閒alse了，這就導(dǎo)致person_infoContinue()和 cl_person_infoContinue()其實是不起效果的。那又該怎么辦呢？自然的想法就是再添加一個中間變量，在cl_person_info()方法中，我利用這個變量進(jìn)行判斷。
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;
}
},
//鼠標(biāo)進(jìn)入到新的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完成了懸浮二級菜單的功能。
