huimv.cloud.client/src/views/Home/Home.vue

<template>
    <div class="home">
        <header class="header">
            <div class="left">
                慧牧科技
                <el-button
                    @click="onMenuCollapse"
                    circle
                    :icon="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                ></el-button>
            </div>
            <div class="right">
                <a href>15968681777</a>
                <a href>登录中</a>
                <a href>退出账号</a>
            </div>
        </header>
        <section class="section">
            <div class="tac">
                <div class="col1">
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="menuCollapse"
                        :unique-opened="true"
                        :default-openeds="defaultUnfoldedMenu"
                        select="1-1"
                    >
                        <div v-for="(item) in menuData " :key="item.index">
                            <el-submenu
                                v-if="item.childList && item.childList.length > 0"
                                :index="item.index"
                            >
                                <template slot="title">
                                    <i :class="item.iconClassName"></i>
                                    <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
                                </template>
                                <el-menu-item
                                    v-for="(item1) in item.childList"
                                    :key="item1.index"
                                    :index="item1.index"
                                    :routerName="item1.routerName"
                                    @click="onClickMenu"
                                >{{ item1.optionName }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="item.index"
                                :disabled="item.disabled"
                                :routerName="item.routerName"
                                @click="onClickMenu"
                            >
                                <i :class="item.iconClassName"></i>
                                <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </div>
                <div class="col2">
                    <div class="warp">
                        <router-view />
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { menuData } from "./mencCofig.js";

export default {
    name: "home",
    data() {
        return {
            // 菜单配置
            menuData,
            menuCollapse: false, //是否水平折叠收起菜单
            defaultUnfoldedMenu: [menuData[0].index] // 默认展开第一项
        };
    },
    created() {
        this.defaultUnfoldedMenu = [
            localStorage.getItem("defaultUnfoldedMenu")
        ];
    },
    mounted() {},
    methods: {
        // 收取菜单按钮
        onMenuCollapse() {
            this.menuCollapse = !this.menuCollapse;
            this.defaultUnfoldedMenu = [
                localStorage.getItem("defaultUnfoldedMenu")
            ];
        },
        // 菜单展开
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
            localStorage.setItem("defaultUnfoldedMenu", "" + key);
        },
        // 菜单收取
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 点击菜单项
        onClickMenu(e) {
            // 如果要跳转的路由和当前路由一致就 return
            if (this.$router.history.current.name == e.$attrs.routerName)
                return;
            this.$router.push({
                path: "/" + e.$attrs.routerName
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.home {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    .header {
        background-color: #fff;
        height: 40px;
        margin-bottom: 1px;
        padding: 10px 20px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            font-size: 25px;
            color: #969696;
            /deep/ .is-circle {
                margin-left: 40px;
            }
        }
        .right {
            a {
                margin-right: 15px;
            }
        }
    }
    .section {
        flex: 1;
        box-sizing: border-box;
        overflow: auto;
        .tac {
            flex: 1;
            display: flex;
            height: 96%;
            box-sizing: border-box;
            .col1 {
                margin-right: 5px;
                border-radius: 5px;
            }
            .col2 {
                flex: 1;
                background-color: #fff;
                padding: 15px;
                border-radius: 5px;
                margin-right: 5px;
                height: 100%;
                overflow: auto;
                .warp {
                    margin: 15px;
                }
            }
        }
    }
    // border: 1px solid #f00;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>