vue 菜单实现

<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)
      
    },