vue使用element实现折叠面板

先看一下最后的效果

正常 image.png
折叠后 image.png

可以看页面可以分为三部分，左边的sidebar、上面的topbar、和内容appMain
来看一下我代码的结构

image.png
上代码

// sidebar.vue
<template>
    <div class="sidebar-container" :class="{'collapse-width': isCollapse}">
        <div class="logo" :class="{'collapse-logo': isCollapse}">
            LOGO
        </div>
        <el-menu
                :default-active="onRoutes"
                class="el-menu-vertical"
                background-color="#304156"
                text-color="#bfcbd9"
                active-text-color="#10B9D3"
                mode="vertical"
                :collapse="isCollapse"
                unique-opened
                router
        >
            <el-menu-item index="dashboard">
                <i class="el-icon-menu"></i>
                <span slot="title">控制面板</span>
            </el-menu-item>
            <el-menu-item index="link1">
                <i class="el-icon-menu"></i>
                <span slot="title">导航一</span>
            </el-menu-item>
            <el-menu-item index="link2">
                <i class="el-icon-document"></i>
                <span slot="title">导航二</span>
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        computed: {
            onRoutes() {
                return this.$route.path.replace("/", "");
            },
            ...mapState({
                isCollapse: (state) => state.common.isCollapse
            })
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
.collapse-width {
    width: 64px !important;
}
.collapse-logo {
    font-size: 18px !important;
}

.sidebar-container {
    width: 180px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transition: width 0.28s;
    z-index: 1001;
    overflow: hidden;
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 180px;
    }
    .el-menu {
        border: none;
        height: 100%;
        width: 100% !important;
        overflow-y: auto;
    }
    .logo {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 30px;
        text-align: center;
        background-color: rgb(48, 65, 86);
        color: #fff;
    }
}
</style>

// topbar.vue
<template>
    <div class="topbar-container">
        <div class="toggle-btn" @click="toggleSidebar">
            <i class="fa fa-navicon"></i>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    import BreadCrumd from './breadCrumd'

    export default {
        data() {
            return {
            }
        },
        components: {
            BreadCrumd
        },
        computed: {
            ...mapState({
                isCollapse: (state) => state.common.isCollapse
            })
        },
        methods: {
            ...mapActions(['toggleSidebar'])
        }
    }
</script>

<style lang="scss" scoped>
    .topbar-container {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        .toggle-btn {
            display: inline-block;
            padding: 0 20px;
        }
    }
</style>

// appMain.vue
<template>
    <div class="app-main-container">
        <transition name="fade-transform" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="scss" scoped>
    .app-main-container {
        position: absolute;
        width: 100%;
        height: calc(100% - 70px);
        margin: 10px;
        padding: 20px;
        background-color: #fff;
    }
</style>

// 组装三个组件的index.vue
<template>
    <div>
        <SideBar></SideBar>
        <div class="right-container" :class="{'collapse-ml': isCollapse}">
            <TopBar></TopBar>
            <AppMain></AppMain>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import SideBar from './sideBar'
    import TopBar from './TopBar/index'
    import AppMain from './appMain'

    export default {
        computed: {
            ...mapState({
                isCollapse: (state) => state.common.isCollapse
            })
        },
       components: {
           SideBar,
           TopBar,
           AppMain
       }
    }
</script>

<style lang="scss" scoped>
.right-container{
    width: 100%;
    min-height: 100%;
    margin-left: 180px;
    transition: margin-left 0.28s;
}
.collapse-ml{
    margin-left: 64px
}
</style>

// vuex common.js
const common = {
    state: {
        isCollapse: false
    },
    mutations: {
        // 折叠侧边栏
        TOGGLE_SIDEBAR(state) {
            state.isCollapse = !state.isCollapse
        }
    },
    actions: {
        toggleSidebar({ commit }) {
            commit('TOGGLE_SIDEBAR')
        }
    }
}

export default common

后面会将实现的代码上传到码云