提交 274f820d 编写于 作者: C chenjianxing

feat: 添加侧边栏折叠功能

上级 0fd89fc6
<template>
<el-aside :width="width" class="ms-aside-container">
<el-aside :width="width" class="ms-aside-container"
:style="{'margin-left': asideHidden ? '0' : '-' + width}">
<div class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': width}">
<i v-if="asideHidden" class="el-icon-arrow-left"/>
<i v-if="!asideHidden" class="el-icon-arrow-right"/>
</div>
<slot></slot>
</el-aside>
</template>
<script>
......@@ -14,6 +17,11 @@
type: String,
default: '300px'
}
},
data() {
return {
asideHidden: true
}
}
}
</script>
......@@ -27,6 +35,31 @@
box-sizing: border-box;
background-color: #FFF;
height: calc(100vh - 80px);
position: relative;
overflow: inherit;
}
.hiddenBottom {
z-index: 199;
width: 8px;
height: 50px;
top: calc((100vh - 80px)/2);
line-height: 50px;
border-radius: 0 15px 15px 0;
background-color: #acb7c1;
display: inline-block;
position: absolute;
cursor: pointer;
opacity: 0.2;
font-size: 2px;
}
.hiddenBottom i {
margin-left: -2px;
}
.hiddenBottom:hover {
opacity: 0.5;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册