version9
4
This commit is contained in:
Anfioo
@@ -1,19 +1,19 @@
|
||||
<div class="vc-menu flex justify-start" id="menu-nav">
|
||||
<div class="vc-menu-main">
|
||||
<ul>
|
||||
<li v-for="menu in menus" v-bind:class="{ active: menu.active }" v-if="menu.childs != undefined && menu.childs.length >0" v-on:click="switchMenu(menu)">
|
||||
<li v-for="menu in menus" v-bind:class="{ active: menu.active }" v-if="menu.childs != undefined && menu.childs.length >0" @mouseenter="hoverMenu(menu)" @mouseleave="leaveMenu">
|
||||
<i class="fa " v-bind:class="menu.icon"></i><span class="margin-left-xs">{{vc.i18n(menu.name)}}</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="vc-menu-sub" v-if="subMenus && subMenus.length > 0">
|
||||
<div class="vc-menu-sub flyout" v-if="subMenus && subMenus.length > 0" @mouseenter="keepMenuOpen" @mouseleave="leaveMenu">
|
||||
<ul>
|
||||
<li class="title">{{curMenuName}}</li>
|
||||
<li v-for="subMenu in subMenus" v-if="subMenu.isShow == 'Y'" v-bind:class="{ active: subMenu.active }" v-on:click="_gotoPage(subMenu.href,subMenu.name)">
|
||||
{{vc.i18n(subMenu.name)}}
|
||||
</li>
|
||||
<li class="sub-footer" @click="_closeSubMenu()"><i class="fa fa-dedent"></i></li>
|
||||
<!-- <li class="sub-footer" @click="_closeSubMenu()"><i class="fa fa-dedent"></i></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,6 +19,22 @@
|
||||
vm.subMenus = [];
|
||||
vm.getMenus(_param.detail);
|
||||
}, false);
|
||||
|
||||
// 点击页面空白处自动关闭二级菜单
|
||||
document.addEventListener('click', (e) => {
|
||||
const menuNav = document.getElementById('menu-nav'); // 整个菜单区域（包含一级和二级）
|
||||
const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
|
||||
|
||||
// 如果点击的是菜单区域内部（一级菜单或二级菜单），不关闭
|
||||
if (menuNav && menuNav.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 点击的是页面其他地方 → 关闭二级菜单
|
||||
if (flyoutMenu && flyoutMenu.classList.contains('active')) {
|
||||
this._closeSubMenu();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
_initSysInfo: function() {
|
||||
@@ -116,6 +132,38 @@
|
||||
vm.subMenus = _menu.childs;
|
||||
vm.curMenuName = _menu.name;
|
||||
|
||||
// 二级菜单样式调整
|
||||
vm.$nextTick(() => {
|
||||
const activeItem = document.querySelector('.vc-menu-main li.active');
|
||||
const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
|
||||
const mainMenu = document.querySelector('.vc-menu-main'); // 一级菜单容器
|
||||
|
||||
if (activeItem && flyoutMenu && mainMenu) {
|
||||
const itemTop = activeItem.offsetTop;
|
||||
const itemHeight = activeItem.offsetHeight;
|
||||
const menuHeight = flyoutMenu.offsetHeight;
|
||||
const mainMenuRect = mainMenu.getBoundingClientRect();
|
||||
const availableBottom = mainMenuRect.bottom - 20; // 距离视口底部留20px边距
|
||||
|
||||
// 理想位置：垂直居中对齐当前项
|
||||
let desiredTop = itemTop + (itemHeight - menuHeight) / 2;
|
||||
|
||||
// 限制：不能超出顶部
|
||||
if (desiredTop < 10) {
|
||||
desiredTop = 10;
|
||||
}
|
||||
|
||||
// 限制：底部不能超过一级菜单可见底部
|
||||
const maxTop = window.innerHeight - menuHeight - 60; // 留出顶部导航和底部安全距
|
||||
if (desiredTop > maxTop) {
|
||||
desiredTop = maxTop;
|
||||
}
|
||||
|
||||
flyoutMenu.style.top = desiredTop + 'px';
|
||||
flyoutMenu.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
if (!_menu.childs || _menu.childs.length < 1) {
|
||||
return;
|
||||
}
|
||||
@@ -170,7 +218,61 @@
|
||||
vm.menus.forEach(item => {
|
||||
item.active = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 新增：鼠标进入一级菜单项
|
||||
hoverMenu: function(_menu) {
|
||||
// 高亮当前一级菜单
|
||||
this.menus = this.refreshMenuActive(this.menus, _menu.id);
|
||||
vc.setMenus(this.menus);
|
||||
|
||||
// 显示对应的二级菜单
|
||||
this.subMenus = _menu.childs || [];
|
||||
this.curMenuName = _menu.name;
|
||||
|
||||
// Vue渲染完成后定位并显示二级菜单
|
||||
this.$nextTick(() => {
|
||||
const hoveredItem = document.querySelector('.vc-menu-main li.active');
|
||||
const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
|
||||
|
||||
if (hoveredItem && flyoutMenu) {
|
||||
const itemTop = hoveredItem.offsetTop;
|
||||
const itemHeight = hoveredItem.offsetHeight;
|
||||
const menuHeight = flyoutMenu.offsetHeight;
|
||||
|
||||
// 垂直居中对齐当前项
|
||||
let desiredTop = itemTop + (itemHeight - menuHeight) / 2;
|
||||
if (desiredTop < 10) desiredTop = 10;
|
||||
|
||||
const maxTop = window.innerHeight - menuHeight - 60;
|
||||
if (desiredTop > maxTop) desiredTop = maxTop;
|
||||
|
||||
flyoutMenu.style.top = desiredTop + 'px';
|
||||
flyoutMenu.classList.add('active');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 新增：鼠标离开一级菜单项时隐藏二级菜单
|
||||
leaveMenu: function() {
|
||||
// 延迟隐藏，防止鼠标快速移到二级菜单时闪烁
|
||||
setTimeout(() => {
|
||||
const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
|
||||
const menuNav = document.getElementById('menu-nav');
|
||||
|
||||
// 如果鼠标当前不在整个菜单区域内，才关闭
|
||||
if (flyoutMenu && menuNav && !menuNav.matches(':hover')) {
|
||||
this.subMenus = [];
|
||||
this.curMenuName = '';
|
||||
this.menus.forEach(item => item.active = false);
|
||||
flyoutMenu.classList.remove('active');
|
||||
}
|
||||
}, 200); // 200ms 延迟，给用户时间把鼠标移到二级菜单上
|
||||
},
|
||||
// 鼠标在二级菜单上时保持打开
|
||||
keepMenuOpen: function() {
|
||||
// 可以什么都不做，只是阻止 leaveMenu 的定时器触发关闭
|
||||
// 实际通过 :hover 判断已足够
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
<div class="vc-nav flex justify-between" id="nav">
|
||||
<div>
|
||||
<ul class="flex flex-start">
|
||||
<!-- <li class="title"><a href="/">{{vc.i18n('systemName')}}</a></li> -->
|
||||
<div class="vc-nav flex justify-between" id="nav" style="position: relative;">
|
||||
<!-- 顶部 logo 容器：复用侧边栏 logo 样式类 + 背景色 -->
|
||||
<div class="vc-nav-logo vc-menu-main title">
|
||||
<ul>
|
||||
<li class="title"><a href="/">{{logo}}</a></li>
|
||||
<li :class="{'active' :item.active == '1' }" v-for="(item,index) in nav.catalogs" @click="_changeMenuCatalog(item)">
|
||||
<i :class="item.icon"></i>{{item.name}}
|
||||
</li>
|
||||
<li @click="_toChainMall()" style="color: red" v-if="nav.storeTypeCd == '800900000001'">
|
||||
<i class="fa fa-shopping-cart"></i>采购设备
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 原顶部内容容器：整体右移，保持原有布局 -->
|
||||
<div class="vc-nav-content flex justify-between w-full">
|
||||
<div>
|
||||
<ul class="flex flex-start">
|
||||
<li :class="{'active' :item.active == '1' }" v-for="(item,index) in nav.catalogs" @click="_changeMenuCatalog(item)">
|
||||
<i :class="item.icon"></i>{{item.name}}
|
||||
</li>
|
||||
<li @click="_toChainMall()" style="color: red" v-if="nav.storeTypeCd == '800900000001'">
|
||||
<i class="fa fa-shopping-cart"></i>采购设备
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="nav flex flex-start">
|
||||
<li class="dropdown" v-if="nav.storeTypeCd != '800900000001' && nav.storeTypeCd != '800900000002' && nav.storeTypeCd != '800900000000'">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<nav aria-label="Page navigation example" v-if="paginationInfo.total != 0">
|
||||
<nav aria-label="Page navigation example" v-if="paginationInfo.total != 0" style="position: sticky; bottom: -15px; width: 100%; background-color: white;">
|
||||
<ul class="pagination justify-content-end">
|
||||
<li class="page-item" v-bind:class="{disabled:paginationInfo.currentPage == 1}">
|
||||
<a class="page-link" v-on:click="current(1)"> « </a>
|
||||
|
||||
Reference in New Issue
Block a user