fix: AdminLayout 汉堡抽屉蒙层被 aside 遮挡不可点击
This commit is contained in:
@@ -1,14 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="admin-layout">
|
<el-container class="admin-layout">
|
||||||
|
<!-- 移动端侧栏抽屉打开时的蒙层 (放在 el-aside 外面, 否则会被 aside 自身遮挡, 不可点击) -->
|
||||||
|
<transition name="aside-fade">
|
||||||
|
<div v-if="mobileAsideOpen" class="aside-mask" @click="mobileAsideOpen = false"></div>
|
||||||
|
</transition>
|
||||||
<el-aside
|
<el-aside
|
||||||
v-if="!route.meta?.hideMenu"
|
v-if="!route.meta?.hideMenu"
|
||||||
width="220px"
|
width="220px"
|
||||||
class="aside"
|
class="aside"
|
||||||
:class="{ 'aside-mobile-open': mobileAsideOpen }"
|
:class="{ 'aside-mobile-open': mobileAsideOpen }"
|
||||||
>
|
>
|
||||||
<transition name="aside-fade">
|
|
||||||
<div v-if="mobileAsideOpen" class="aside-mask" @click="mobileAsideOpen = false"></div>
|
|
||||||
</transition>
|
|
||||||
<div class="aside-logo">
|
<div class="aside-logo">
|
||||||
<div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
|
<div class="logo-icon"><img src="/logo.png" alt="logo" /></div>
|
||||||
<div class="logo-text">
|
<div class="logo-text">
|
||||||
@@ -497,15 +498,12 @@ const onCommand = (cmd) => { if (cmd === 'logout') logout() }
|
|||||||
.aside-close { display: none; }
|
.aside-close { display: none; }
|
||||||
.hamburger { display: none; }
|
.hamburger { display: none; }
|
||||||
|
|
||||||
/* 移动端侧栏抽屉打开时的蒙层 (放在 layout 顶层, 透过 admin-layout 主结构显示) */
|
/* 移动端侧栏抽屉打开时的蒙层 */
|
||||||
@media (max-width: 768px) {
|
.aside-mask {
|
||||||
.admin-layout { position: relative; }
|
|
||||||
.aside-mask {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(0, 0, 0, 0.45);
|
background: rgba(0, 0, 0, 0.45);
|
||||||
z-index: 1999;
|
z-index: 1999;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-fade-enter-active, .aside-fade-leave-active { transition: opacity 0.2s; }
|
.aside-fade-enter-active, .aside-fade-leave-active { transition: opacity 0.2s; }
|
||||||
|
|||||||
Reference in New Issue
Block a user