使用Vue实现一个当鼠标悬浮时出现，鼠标离开时消失的双层菜单

前言

分享一个基于Vue实现一个当鼠标悬浮时出现，鼠标离开时消失的双层菜单。同时也是为了以后需要类似的需求时，可以提供一个实现思路，以及可以快速ctrl+c和ctrl+v操作，提高工作效率~

一、示例代码

（1）/src/views/Example/DiyNavMenu/index.vue

<template><div class="index"><ul><liv-for="(item, index) in tabList":key="index":class="{ 'active-tab': index == activeTabIndex }"@mouseover="item.name == '项目管理'? (item.isVisibleMenuBox = true): (item.isVisibleMenuBox = false)"@mouseleave="item.isVisibleMenuBox = false;isVisibleSubMenuBox = false;isMenuHover = -1;"><span class="tab-label">{{ item.name }}</span><div class="menu" v-show="item.isVisibleMenuBox"><div class="menu-box"><div class="menu-box-cascader"><divclass="menu-item"v-for="(menuItem, menuIndex) in menuList":key="menuIndex":class="{ 'menu-hover': menuIndex == isMenuHover }"@mouseover="handleMenuMouseOver(menuItem, menuIndex)"><span>{{ menuItem.label }}</span><i class="el-icon-arrow-right" /></div></div><div class="menu-box-cascader" v-show="isVisibleSubMenuBox"><divclass="menu-item"v-for="(subMenuItem, subMenuIndex) in subMenuList":key="subMenuIndex"@click="handleSubMenuClick(subMenuItem, subMenuIndex)"><span>{{ subMenuItem.label }}</span></div></div></div></div></li></ul></div>
</template><script>
export default {data: () => ({// 默认激活的页签索引activeTabIndex: 1,// 页签列表tabList: [{name: '系统中心',isVisibleMenuBox: false,},{name: '项目管理',isVisibleMenuBox: false,},{name: '用户管理',isVisibleMenuBox: false,},],// 菜单列表menuList: [{label: '卡拉OK项目工程',children: [{label: '卡拉一期',},{label: '卡拉二期',},{label: '卡拉三期',},{label: '卡拉四期',},{label: '卡拉五期',},],},{label: '芭比Q项目工程',children: [{label: '芭比一期',},{label: '芭比二期',},],},{label: '最流批的项目工程',children: [{label: '最流批一期',},],},],// 菜单索引isMenuHover: -1,// 子菜单是否可见isVisibleSubMenuBox: false,// 子菜单列表subMenuList: [],}),methods: {/*** 菜单鼠标悬浮事件*/handleMenuMouseOver(menuItem, menuIndex) {this.isMenuHover = menuIndexif (menuItem.children) {this.isVisibleSubMenuBox = truethis.subMenuList = menuItem.children}},/*** 子菜单点击事件*/handleSubMenuClick(subMenuItem, subMenuIndex) {console.log('handleSubMenuClick ->', subMenuItem, subMenuIndex)},},
};
</script><style lang="less" scoped>
.index {width: 100%;height: 35px;display: flex;justify-content: center;background-color: #fff;border-bottom: 1px solid #eee;ul {min-width: 300px;height: 100%;display: flex;justify-content: space-between;li {height: 100%;display: flex;align-items: center;justify-content: center;list-style: none;position: relative;.tab-label {padding: 0px 10px;font-size: 14px;line-height: 34px;border-bottom: 1px solid transparent;}.tab-label:hover {border-bottom: 1px solid #072fbe;cursor: pointer;color: #072fbe;}.menu {position: absolute;top: 35px;left: 0;z-index: 10;width: 150px;height: auto;background-color: #fff;.menu-box {position: relative;display: flex;width: 100%;height: auto;.menu-box-cascader {width: 100%;height: 200px;background-color: #fff;border-radius: 5px;box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.15);&:nth-of-type(2) {position: absolute;top: 0;left: 152px;width: 180px;// background-color: #faf;}.menu-item {position: relative;width: 100%;height: 28px;display: flex;align-items: center;justify-content: center;cursor: pointer;span {font-size: 13px;}.el-icon-arrow-right {font-size: 12px;position: absolute;right: 2px;}&:hover {background-color: #072fbe1a;span, .el-icon-arrow-right {color: #072fbe;}}}.menu-hover {background-color: #072fbe1a;span, .el-icon-arrow-right {color: #072fbe;}}}}}}.active-tab {// background-color: aqua;.tab-label {border-bottom: 1px solid #072fbe;color: #072fbe;}}}
}
</style>