From 8c3afcc3aba389bb823e7a86f5bfd57c68f9380f Mon Sep 17 00:00:00 2001
From: chenghongxing <1126263215@qq.com>
Date: Sun, 23 Aug 2020 17:41:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20the=20position=20problem=20of=20pop=20co?=
=?UTF-8?q?mponent=20in=20fixed=20side=20mode;:bug:=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=EF=BC=9A=E5=9B=BA=E5=AE=9A=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A8=A1?=
=?UTF-8?q?=E5=BC=8F=E4=B8=8B=E5=BC=B9=E5=87=BA=E5=BC=8F=E7=BB=84=E4=BB=B6?=
=?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE=E9=97=AE=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layouts/AdminLayout.vue | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 5736f84..71ae0ed 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,9 +1,10 @@
<template>
- <a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '', 'beauty-scroll']">
+ <a-layout :class="['admin-layout', 'beauty-scroll']">
<drawer v-if="isMobile" v-model="collapsed">
<side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer>
- <side-menu :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+ <side-menu :class="[fixedSideBar ? 'fixed-side' : '']" :theme="theme.mode" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
+ <div v-if="fixedSideBar" :style="`width: ${sideMenuWidth}`" class="virtual-side"></div>
<drawer v-if="!hideSetting" v-model="showSetting" placement="right">
<div class="setting" slot="handler">
<a-icon :type="showSetting ? 'close' : 'setting'"/>
@@ -78,12 +79,17 @@ export default {
<style lang="less" scoped>
.admin-layout{
- &.fixed-side-bar{
- height: 100vh;
- .admin-layout-main{
- overflow: scroll;
+ .side-menu{
+ &.fixed-side{
+ position: fixed;
+ left: 0;
+ top: 0;
}
}
+ .virtual-side{
+ display: inline-block;
+ transition: width 0.2s;
+ }
.admin-layout-main{
.admin-header{
top: 0;