vue2 实现一个左右两侧,收起与展开组件 ( 用于存放,aside和main )
LayoutMain
<template>
<div class="LayoutMain">
<el-aside
:width="sidebarIsCollapse ? '215px' : '0px'"
class="aside-wrap"
>
<template>
<div
:class="['aside-wrap-header',{'aside-wrap-header--hide':sidebarIsCollapse}]"
@click="toggleCollapse"
>
<div
v-if="sidebarIsCollapse"
class="layout-main-title"
>
{{ menuName }}
</div>
</div>
<div class="aside-wrap-slot">
<slot
class="btnSlot"
name="asideWrapSlot"
/>
</div>
</template>
</el-aside>
<div
class="layout-main-btn"
:class="['left', {'hide':!sidebarIsCollapse}]"
@click="toggleCollapse"
>
<template v-if="sidebarIsCollapse">
<i class="el-icon-arrow-left" />
</template>
<template v-else>
<i class="el-icon-arrow-right" />
</template>
</div>
<el-main class="main-wrap">
<slot
class="btnSlot"
name="asideWrapMain"
/>
</el-main>
</div>
</template>
<script>
export default {
name: 'LayoutMain',
components: {},
props: {
sidebarIsCollapse: {
type: Boolean,
default: false
},
menuName: {
type: String,
default: ''
}
},
data() {
return {
};
},
methods: {
toggleCollapse() {
this.$emit('toggleCollapse');
}
}
};
</script>
<style lang="scss" scoped>
.LayoutMain {
background: #F8F8F8;
height: 100%;
width: 100%;
display: flex;
position: relative;
::v-deep .el-main {
padding: 16px!important;
}
.aside-wrap {
height: 100%;
background: #fff;
transition: width .4s;
overflow: hidden;
.aside-wrap-header {
display: flex;
height: 48px;
align-items: center;
padding: 0 16px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
cursor: pointer;
&::v-deep .el-menu::-webkit-scrollbar {
width: 0 !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
}
}
.layout-main-btn {
position: absolute;
top: 10px;
z-index: 999;
height: 56px;
line-height: 54px;
text-align: center;
width: 14px;
border-radius: 10px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
i {
color: #b3b3b3;
font-size: 14px;
}
}
.left {
left: 208px;
transition: left .4s;
}
.hide {
left: -5px;
transition: left .4s;
}
.main-wrap {
position: relative;
border-left: 1px solid #e5e5e5;
background: #fff;
}
}
</style>
使用组件
<LayoutMain
:sidebar-is-collapse="sidebarIsCollapse"
menu-name="快捷筛选"
@toggleCollapse="toggleCollapse"
>
<div slot="asideWrapSlot">
asideWrapSlot
</div>
<div slot="asideWrapMain">
asideWrapMain
</div>
</LayoutMain>
sidebarIsCollapse: true,
toggleCollapse() {
this.sidebarIsCollapse = !this.sidebarIsCollapse;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9db6556a71d20e87e08d5a46ef4a3b84.png)