vue + element ui 实现侧边栏导航栏折叠收起

首页布局如下

要求点击按钮,将侧边栏收缩,

通过 row 和 col 组件，并通过 col 组件的

span

属性我们就可以自由地组合布局。

折叠前

折叠后

<template>
    <div class="app-layout" :class="{ collapse: app.isFold }">
        <div class="app-layout__mask" @click="app.fold(true)"></div>

        <div class="app-layout__left" style="margin-right: 20px;">
            <slider />
        </div>

        <div class="app-layout__right">
            <topbar />
            <process />
            <views />
        </div>
    </div>
</template>

<script lang="ts" name="app-layout" setup>
import Topbar from "./components/topbar.vue";
import Slider from "./components/slider.vue";
import process from "./components/process.vue";
import Views from "./components/views.vue";
import { useBase } from "/$/base";

const { app } = useBase();
</script>

<style lang="scss" scoped>
.app-layout {
    display: flex;
    background-color: #f7f7f7;
    height: 100%;
    width: 100%;
    overflow: hidden;

    &__left {
        overflow: hidden;
        height: 100%;
        width: 255px;
        transition: left 0.2s;
    }

    &__right {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: calc(100% - 255px);
    }

    &__mask {
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        width: 100%;
        z-index: 999;
    }

    @media only screen and (max-width: 768px) {
        .app-layout__left {
            position: absolute;
            left: 0;
            z-index: 9999;
            transition:
                transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1),
                box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
        }

        .app-layout__right {
            width: 100%;
        }

        &.collapse {
            .app-layout__left {
                transform: translateX(-100%);
            }

            .app-layout__mask {
                display: none;
            }
        }
    }

    @media only screen and (min-width: 768px) {
        .app-layout__left,
        .app-layout__right {
            transition: width 0.2s ease-in-out;
        }

        .app-layout__mask {
            display: none;
        }

        &.collapse {
            .app-layout__left {
                width: 64px;
            }

            .app-layout__right {
                width: calc(100% - 64px);
            }
        }
    }
}
</style>