fix: 侧边栏折叠样式

This commit is contained in:
chenjianxing 2020-08-05 18:13:14 +08:00
parent 0d3f93a71c
commit 61496ce11a
1 changed files with 6 additions and 8 deletions

View File

@ -1,9 +1,9 @@
<template> <template>
<el-aside :width="width" class="ms-aside-container" <el-aside :width="width" class="ms-aside-container"
:style="{'margin-left': asideHidden ? '0' : '-' + width}"> :style="{'margin-left': !asideHidden ? 0 : '-' + width}">
<div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': width}"> <div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': asideHidden ? 0 : width}">
<i v-if="asideHidden" class="el-icon-arrow-left"/> <i v-if="!asideHidden" class="el-icon-arrow-left"/>
<i v-if="!asideHidden" class="el-icon-arrow-right"/> <i v-if="asideHidden" class="el-icon-arrow-right"/>
</div> </div>
<slot></slot> <slot></slot>
</el-aside> </el-aside>
@ -24,7 +24,7 @@
}, },
data() { data() {
return { return {
asideHidden: true asideHidden: false
} }
} }
} }
@ -39,12 +39,9 @@
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
height: calc(100vh - 80px); height: calc(100vh - 80px);
position: relative;
overflow: inherit;
} }
.hiddenBottom { .hiddenBottom {
z-index: 199;
width: 8px; width: 8px;
height: 50px; height: 50px;
top: calc((100vh - 80px)/3); top: calc((100vh - 80px)/3);
@ -56,6 +53,7 @@
cursor: pointer; cursor: pointer;
opacity: 0.2; opacity: 0.2;
font-size: 2px; font-size: 2px;
margin-left: 1px;
} }
.hiddenBottom i { .hiddenBottom i {