'admin-23.02.27:优化分栏布局'
This commit is contained in:
parent
909232742c
commit
1e78522b9f
|
|
@ -103,10 +103,11 @@ const initMenuFixed = (clientWidth) => {
|
||||||
};
|
};
|
||||||
// 鼠标移入、移出
|
// 鼠标移入、移出
|
||||||
const onAsideEnterLeave = (bool) => {
|
const onAsideEnterLeave = (bool) => {
|
||||||
let { layout } = themeConfig.value;
|
const { layout, isColumnsMenuHoverPreload } = themeConfig.value;
|
||||||
if (layout !== 'columns') return false;
|
if (layout !== 'columns') return false;
|
||||||
if (!bool) mittBus.emit('restoreDefault');
|
if (!bool) mittBus.emit('restoreDefault');
|
||||||
stores.setColumnsMenuHover(bool);
|
// 开启 `分栏菜单鼠标悬停预加载` 才设置,防止 columnsAside.vue 监听 pinia.state
|
||||||
|
if (isColumnsMenuHoverPreload) stores.setColumnsMenuHover(bool);
|
||||||
};
|
};
|
||||||
// 页面加载前
|
// 页面加载前
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
|
|
@ -117,6 +118,7 @@ onBeforeMount(() => {
|
||||||
mittBus.on('setSendColumnsChildren', (res) => {
|
mittBus.on('setSendColumnsChildren', (res) => {
|
||||||
state.menuList = res.children;
|
state.menuList = res.children;
|
||||||
});
|
});
|
||||||
|
// 开启经典布局分割菜单时,设置菜单数据
|
||||||
mittBus.on('setSendClassicChildren', (res) => {
|
mittBus.on('setSendClassicChildren', (res) => {
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
if (layout === 'classic' && isClassicSplitMenu) {
|
||||||
|
|
@ -124,9 +126,11 @@ onBeforeMount(() => {
|
||||||
state.menuList = res.children;
|
state.menuList = res.children;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// 开启经典布局分割菜单时,重新处理菜单数据
|
||||||
mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||||
setFilterRoutes();
|
setFilterRoutes();
|
||||||
});
|
});
|
||||||
|
// 监听窗口大小改变时(适配移动端)
|
||||||
mittBus.on('layoutMobileResize', (res) => {
|
mittBus.on('layoutMobileResize', (res) => {
|
||||||
initMenuFixed(res.clientWidth);
|
initMenuFixed(res.clientWidth);
|
||||||
closeLayoutAsideMobileMode();
|
closeLayoutAsideMobileMode();
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<li
|
<li
|
||||||
v-for="(v, k) in state.columnsAsideList"
|
v-for="(v, k) in state.columnsAsideList"
|
||||||
:key="k"
|
:key="k"
|
||||||
@click="onColumnsAsideMenuClick(v, k)"
|
@click="onColumnsAsideMenuClick(v)"
|
||||||
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
||||||
:ref="
|
:ref="
|
||||||
(el) => {
|
(el) => {
|
||||||
|
|
@ -78,11 +78,14 @@ const setColumnsAsideMove = (k) => {
|
||||||
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
||||||
};
|
};
|
||||||
// 菜单高亮点击事件
|
// 菜单高亮点击事件
|
||||||
const onColumnsAsideMenuClick = (v, k) => {
|
const onColumnsAsideMenuClick = (v) => {
|
||||||
setColumnsAsideMove(k);
|
|
||||||
let { path, redirect } = v;
|
let { path, redirect } = v;
|
||||||
if (redirect) router.push(redirect);
|
if (redirect) router.push(redirect);
|
||||||
else router.push(path);
|
else router.push(path);
|
||||||
|
// 一个路由设置自动收起菜单
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
|
||||||
|
if (!v.children) themeConfig.value.isCollapse = true;
|
||||||
|
else if (v.children.length > 1) themeConfig.value.isCollapse = false;
|
||||||
};
|
};
|
||||||
// 鼠标移入时,显示当前的子级菜单
|
// 鼠标移入时,显示当前的子级菜单
|
||||||
const onColumnsAsideMenuMouseenter = (v, k) => {
|
const onColumnsAsideMenuMouseenter = (v, k) => {
|
||||||
|
|
@ -97,6 +100,7 @@ const onColumnsAsideMenuMouseenter = (v, k) => {
|
||||||
};
|
};
|
||||||
// 鼠标移走时,显示原来的子级菜单
|
// 鼠标移走时,显示原来的子级菜单
|
||||||
const onColumnsAsideMenuMouseleave = async () => {
|
const onColumnsAsideMenuMouseleave = async () => {
|
||||||
|
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
|
||||||
await stores.setColumnsNavHover(false);
|
await stores.setColumnsNavHover(false);
|
||||||
// 添加延时器,防止拿到的 store.state.routesList 值不是最新的
|
// 添加延时器,防止拿到的 store.state.routesList 值不是最新的
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
@ -115,6 +119,9 @@ const setFilterRoutes = () => {
|
||||||
const resData = setSendChildren(route.path);
|
const resData = setSendChildren(route.path);
|
||||||
if (Object.keys(resData).length <= 0) return false;
|
if (Object.keys(resData).length <= 0) return false;
|
||||||
onColumnsAsideDown(resData.item?.k);
|
onColumnsAsideDown(resData.item?.k);
|
||||||
|
// 刷新时,初始化一个路由设置自动收起菜单
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
|
||||||
|
resData.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
|
||||||
mittBus.emit('setSendColumnsChildren', resData);
|
mittBus.emit('setSendColumnsChildren', resData);
|
||||||
};
|
};
|
||||||
// 传送当前子级数据到菜单中
|
// 传送当前子级数据到菜单中
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ const updateScrollbar = () => {
|
||||||
// 更新父级 scrollbar
|
// 更新父级 scrollbar
|
||||||
layoutScrollbarRef.value.update();
|
layoutScrollbarRef.value.update();
|
||||||
// 更新子级 scrollbar
|
// 更新子级 scrollbar
|
||||||
layoutMainRef.value.layoutMainScrollbarRef.update();
|
layoutMainRef.value && layoutMainRef.value.layoutMainScrollbarRef.update();
|
||||||
};
|
};
|
||||||
// 重置滚动条高度,由于组件是异步引入的
|
// 重置滚动条高度,由于组件是异步引入的
|
||||||
const initScrollBarHeight = () => {
|
const initScrollBarHeight = () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue