fix: 侧边栏折叠样式
This commit is contained in:
parent
0d3f93a71c
commit
61496ce11a
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue