vue-learning/企业级管理系统/web/admin_system/src/layout/components/Aside.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:30:33
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-28 16:01:49
 * @FilePath: \admin_system\src\layout\components\Aside.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved.  223142 2f4156
-->
<template>
    <el-scrollbar class="wrapper">
        <el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
            active-text-color="#ffd04b" :collapse="asideCollapse">
            <template v-for="route in this.routers" :key="route.path">
                <template v-if="!route.hidden">
                    <template v-if="hasOnlyChild(route.children)">
                        <!-- 当只有一个子路由时，直接渲染子路由 -->
                        <el-menu-item :index="route.children[0].path" class="sidebar-submenu">
                            <component :is="route.children[0].meta.icon" class="icons">
                            </component>
                            <!-- <el-icon v-html="route.children[0].meta && route.children[0].meta.icon"></el-icon> -->
                            <template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
                        </el-menu-item>
                    </template>
                    <template v-else>
                        <!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
                        <el-sub-menu v-if="route.children && route.children.length" :index="route.path"
                            class="sidebar-submenu">
                            <template #title>
                                <component :is="route.meta.icon" class="icons"></component>
                                <span>{{ route.meta && route.meta.title }}</span>
                            </template>
                            <template v-for="child in route.children" :key="child.path">
                                <el-menu-item v-if="!child.hidden" :index="child.path" class="sidebar-item">
                                    <component :is="child.meta.icon" class="icons"></component>
                                    <template #title>{{ child.meta && child.meta.title }}</template>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </template>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<script>
import { useRouter, useRoute } from "vue-router";

export default {
    name: "LayoutAside",
    data()
    {
        return {
            routers: null,
        };
    },
    methods: {
        //用于判断一个路由是否只有一项子路由
        hasOnlyChild: function (children)
        {
            //防御验证
            if (!children)
            {
                return false;
            }

            //剔除掉hidden的路由
            const routes = children.filter((item) =>
            {
                return item.hidden ? false : true;
            });

            if (routes.length === 1)
            {
                return true;
            }

            return false;
        },

    },
    computed: {
        //获取当前的路由
        currentPath()
        {
            let path = useRoute().path;

            return path;
        },
        //获取导航栏是否折叠的标志
        asideCollapse()
        {
            return this.$store.state.app.asideBarCollapse;
        }
    },
    created()
    {
        this.routers = useRouter().options.routes;
    }
};
</script>

<style scoped>
.el-menu {
    border-right: none;
    /* border-left: 5px solid #1d74b2; */
    overflow: auto;

    -webkit-touch-callout: none;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

.is-active {
    background-color: #ffffff4f !important;
}



/* .is-opened {
    border-left: 5px solid #1d74b2;
} */

.icons {
    width: 1em;
    height: 1em;
    margin-right: 8px;
}

.sidebar-submenu {
    background-color: #2f4156 !important;
}

.sidebar-item {
    background-color: #223142 !important;
}

.wrapper {
    height: 100%;
}
</style>