Vue 自定义级联菜单

Menu组件

<template>
  <div class="menu" v-if="global.v > 0">
    <div>v:{{ global.v }} level:{{ global.level }}</div>
    <ul @mouseenter="enter()" @mouseleave="leave()">
      <li v-for="menu in menus" :key="menu.id" @mouseenter="active(menu)" :class="{ active: level <= global.level && activeMenuId == menu.id }">{{ menu.id }}_L{{ level }}</li>
    </ul>
    <div v-if="submenu && this.level - this.global.level < 1" class="menu-sub">
      <A :global="global" :level="level + 1" :menus="submenu"></A>
    </div>
  </div>
</template>

<script>
export default {
  name: 'A',
  props: {
    global: {
      type: Object,
      default: () => {
        return { v: 0, level: 1 }
      }
    },
    level: {},
    menus: {}
  },
  components: {},
  data() {
    return {
      submenu: null,
      activeMenuId: null
    }
  },
  created() {},
  methods: {
    active(menu) {
      this.activeMenuId = menu.id
      this.delay(() => {
        this.submenu = menu.submenu
        console.info('show_sub_menu')
      })
    },
    enter() {
      this.global.level = this.level
    },
    leave() {
      this.delay(() => {
        if (this.level == this.global.level) this.global.level--
      })
    },
    showSub() {
      return this.submenu && this.level - this.global.level > 0
    },
    delay(cb, delay) {
      let v = ++this.global.v
      setTimeout(() => {
        if (this.global.v === v) {
          cb()
        }
      }, delay || 50)
    },
    hide() {
      this.global.v = 0
    },
    show() {
      this.global.v = 1
    }
  }
}
</script>

<style>
.menu {
  display: inline-block;
  position: relative;
  border: solid 1px #abc;
  padding: 0px;
  min-width: 100px;
  background-color: beige;
}

.menu ul {
  padding: 0;
  margin: 0;
}

.menu .menu-sub {
  position: absolute;
  top: 0;
  left: 100%;
}

.menu ul li {
  list-style: none;
  margin: 2px;
  padding: 2px 10px;
}

.menu .active {
  background-color: rgb(183, 218, 250);
}
</style>

使用

<template>
  <div class="hello">
    <div><button @click="showMenu">File</button></div>
    <A :level="1" :menus="menus" ref="GMenu"></A>
  </div>
</template>

<script>
import A from './A'

let menus = [
  {
    id: 'a',
    submenu: [
      {
        id: 'aa',
        submenu: [{ id: 'aaa' }, { id: 'aab' }, { id: 'aac' }]
      },
      { id: 'ab' },
      { id: 'ac' }
    ]
  }
]

let makeMenu = (menus, pid, deep) => {
  let m = Math.floor(Math.random() * 10) + 9
  for (let index = 0; index < m; index++) {
    let menu = { id: pid + '' + index }
    let submenu = []
    if (deep < 3) {
      menu.submenu = makeMenu(submenu, menu.id, deep + 1)
    }
    menus.push(menu)
  }
  return menus
}

makeMenu(menus, 'm', 1)

console.info(menus)

export default {
  components: { A },
  name: 'HelloWorld',
  data() {
    return {
      menus: menus
    }
  },
  props: {
    msg: String
  },
  created() {
    let self = this
    document.getElementsByTagName('body')[0].addEventListener('click', (e) => {
      e.stopPropagation()
      e.preventDefault()
      if (e.target.tagName === 'BODY') {
        console.log(e)
        self.hideMenu()
      }
    })
  },
  methods: {
    showMenu() {
      this.$refs.GMenu.show()
    },
    hideMenu() {
      this.$refs.GMenu.hide()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>