需求简要说明

页面上分为左右两半部分 ，有时候屏幕过小需要两边用按钮切换使其都可以全屏显示或得更大的宽度

---

一、图片示例

二、想要得到的效果示例

2.简易代码片

这个页面布局分为三份即左边树形结构部分中间按钮部分和右边列表展示部分
按钮部分html：

<div>
	<i class="el-icon-s-fold" v-show="isTest1" @click="test1()"></i>
	<i class="el-icon-s-unfold" v-show="isTest2" @click="test2()"></i>
</div>

左边部分和右边部分html（只写了关键部分，其他样式需要自己写）：

// 左边
<div class="content-warp-left" :class="[isTest1?'':'lack_nav',isTest2?'':'lack_nav3']">
</div>
// 右边
<div class="content-warp-right" :class="isTest2?'':'lack_nav2'">
</div>

js部分

// 左边
methods:{
	test1(){
		if (!this.isTest2){
			this.isTest2 = true
		} else {
			this.isTest1 = !this.isTest1
		}
	}
},
test2(){
	if (!this.isTest1){
		this.isTest1 = true
	} else {
		this.isTest2 = !this.isTest2
	}
}

css关键部分

.content-warp-left{
	// 左边部分的自定义样式 这里省略
	width: 350px;
	&.lack_nav{
		display:none !important;
	}
	&.lack_nav3{
		width:100% !important;
	}
}
.content-warp-left{
	// 右边部分的自定义样式 这里省略
	&.lack_nav2{
		display:none !important;
	}
}

---

以上就是这次的分享，因为涉及到的样式比较多就只挑了重要的部分来写。