主要實現鼠標移到主菜單,另一個div顯示子菜單,採用mouseenter和mouseleave結合,不要使用mouseout,因爲mouseout在大div中有子元素,在子元素也會觸發mouseout
<template>
<div>
<ul class="mainMenu">
<li
:class="['mainMenu-item',{activeMain:curMainIndex===index}]"
v-for="(item,index) in this.menuData"
:key="index"
@click="go(item)"
@mouseenter="handelMouseEnter(index)"
@mouseleave="handelMouseleave" >
{{item.menuName}}<i v-if="item.childMenu && item.childMenu.length>0" class="el-icon-arrow-down"></i>
</li>
</ul>
<div ref="submenuWrap" class="submenuWrap" v-show="isShow" style="" @mouseenter="handelSubMouseEnter" @mouseleave="handelSubMouseleave">
<ul class="subMenu">
<li class="subMenu-item" v-for="(submenu,subindex) in submenu" :key="subindex">
<!-- <div v-if="submenu.childMenu && submenu.childMenu.length>0">{{submenu.menuName}}</div> -->
<!-- <div v-if="!submenu.childMenu || submenu.childMenu.length==0" @click="go(submenu)">{{submenu.menuName}}</div> -->
<div @click="go(submenu)">{{submenu.menuName}}</div>
<ul v-if="submenu.childMenu && submenu.childMenu.length>0">
<li
v-for="(innerSubmenu,innerSubindex) in submenu.childMenu"
:key="innerSubindex"
@click="go(innerSubmenu)">
<div>{{innerSubmenu.menuName}}</div>
</li>
</ul>
</li>
</ul>
</div>
<div style="height:150px;">content</div>
</div>
</template>
data() {
return {
curMainIndex:"",
timer:null,
isShow:false,
submenu:"",
menuData: [],
go(submenu){
if(!submenu.childMenu || submenu.childMenu.length==0){
alert(submenu.menuName)
}
},
clickSub(){
alert("hi")
},
handelSubMouseleave(){
console.log("leave sub")
this.isShow = false
},
handelSubMouseEnter(){
clearTimeout(this.timer)
console.log("enter sub")
// this.isShow = true
},
handelMouseEnter(index){
this.curMainIndex = index
clearTimeout(this.timer)
this.submenu = this.menuData[index].childMenu
if(this.submenu){
this.isShow = true
}else{
this.isShow = false
}
},
handelMouseleave(){
this.curMainIndex = ""
this.timer = setTimeout(()=>{
this.isShow = false
},500)
},