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