高州网站开发公司,网站开发源代码,泰州城乡建设网站,濮阳房产网官网前言
分享一个基于Vue实现一个当鼠标悬浮时出现#xff0c;鼠标离开时消失的双层菜单。同时也是为了以后需要类似的需求时#xff0c;可以提供一个实现思路#xff0c;以及可以快速ctrlc和ctrlv操作#xff0c;提高工作效率~
一、示例代码
#xff08;1#xff09;/sr…前言
分享一个基于Vue实现一个当鼠标悬浮时出现鼠标离开时消失的双层菜单。同时也是为了以后需要类似的需求时可以提供一个实现思路以及可以快速ctrlc和ctrlv操作提高工作效率~
一、示例代码
1/src/views/Example/DiyNavMenu/index.vue
templatediv classindexulliv-for(item, index) in tabList:keyindex:class{ active-tab: index activeTabIndex }mouseoveritem.name 项目管理? (item.isVisibleMenuBox true): (item.isVisibleMenuBox false)mouseleaveitem.isVisibleMenuBox false;isVisibleSubMenuBox false;isMenuHover -1;span classtab-label{{ item.name }}/spandiv classmenu v-showitem.isVisibleMenuBoxdiv classmenu-boxdiv classmenu-box-cascaderdivclassmenu-itemv-for(menuItem, menuIndex) in menuList:keymenuIndex:class{ menu-hover: menuIndex isMenuHover }mouseoverhandleMenuMouseOver(menuItem, menuIndex)span{{ menuItem.label }}/spani classel-icon-arrow-right //div/divdiv classmenu-box-cascader v-showisVisibleSubMenuBoxdivclassmenu-itemv-for(subMenuItem, subMenuIndex) in subMenuList:keysubMenuIndexclickhandleSubMenuClick(subMenuItem, subMenuIndex)span{{ subMenuItem.label }}/span/div/div/div/div/li/ul/div
/templatescript
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)},},
};
/scriptstyle langless 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
