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;
		// margin-left: 1px;
		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;
        }

效果