前言

分享一個基于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>

二、運行效果

// Todo