vue中左侧菜单栏收缩折叠
2021-03-23 本文已影响0人
Henry01
完整代码如下:
<div class="errMdCont">
<div class="collapse-btn">
<div v-show="errMdList" class="errMdList">
123123
</div>
<i v-if="!collapse" class="el-icon-d-arrow-right" @click="collapseChage"></i>
<i v-else class="el-icon-d-arrow-left" :style="[unfold1]" @click="collapseChage"></i>
</div>
</div>
data() {
return {
collapse: true,
errMdList:true,
unfold1:{ 'margin-left': 49+'%'},
}
},
// 侧边栏折叠
collapseChage() {
this.collapse = !this.collapse;
if(this.collapse){
this.errMdList = true
}else{
this.errMdList = false
}
},
.errMdCont{
min-height: 60vh;
}
.errMdList{
width: 50%;
min-height: 50vh;
border: 1px solid #ddd;
position: absolute;
}
.collapse-btn {
cursor: pointer;
}
.collapse-btn:hover {
background: transparent;
}
.el-icon-d-arrow-left,.el-icon-d-arrow-right{
font-size: 20px;
color: #d9ebfe;
position: absolute;
top: 50%;
}