防止移动端侧边栏遮挡UI

简单粗暴的适配移动端
This commit is contained in:
John Smith 2019-07-08 16:07:05 +08:00
parent 64cca50982
commit 2914a19288
3 changed files with 50 additions and 3 deletions

View File

@ -27,7 +27,6 @@
{locale: 'ja', name: '日本語'},
{locale: 'en', name: 'English'}
]" :key="locale"
:class="{'is-active': locale === $i18n.locale}"
@click="onSelectLanguage(locale)"
>{{name}}</el-menu-item>
</el-submenu>

View File

@ -1,6 +1,7 @@
<template>
<el-container class="app-wrapper">
<el-aside width="200px" class="sidebar-container">
<el-container class="app-wrapper" :class="{mobile: isMobile}">
<div v-show="isMobile && !hideSidebar" class="drawer-bg" @click="hideSidebar = true"></div>
<el-aside width="210px" class="sidebar-container" :class="{'hide-sidebar': hideSidebar}">
<div class="logo-container">
<router-link to="/">
<img src="@/assets/img/logo.png" class="sidebar-logo">
@ -10,6 +11,7 @@
<sidebar></sidebar>
</el-aside>
<el-main>
<el-button v-show="isMobile" class="menu-button" icon="el-icon-s-unfold" @click="hideSidebar = false"></el-button>
<router-view></router-view>
</el-main>
</el-container>
@ -22,6 +24,24 @@ export default {
name: 'Layout',
components: {
Sidebar
},
data() {
return {
isMobile: false,
hideSidebar: true
}
},
created() {
window.addEventListener('resize', this.onResize)
this.onResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize)
},
methods: {
onResize() {
this.isMobile = document.body.clientWidth <= 992
}
}
}
</script>
@ -39,11 +59,35 @@ a, a:focus, a:hover {
text-decoration: none;
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.sidebar-container {
background-color: #304156;
overflow: hidden;
}
.app-wrapper.mobile .sidebar-container {
position: fixed;
top: 0;
left: 0;
transition-duration: 0.3s;
z-index: 1001;
}
.app-wrapper.mobile .sidebar-container.hide-sidebar {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-210px, 0, 0);
}
.sidebar-container .logo-container {
width: 100%;
height: 50px;

View File

@ -382,6 +382,10 @@ export default {
padding: 25px;
}
.app-wrapper.mobile #example-container {
display: none;
}
#fakebody {
outline: 1px #999 dashed;
height: 100%;