it-console/code/web/IT工具综合平台/src/layout/components/Aside.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-04 11:30:33
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-06 00:25:26
 * @FilePath: /IT工具综合平台/src/layout/components/Aside.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved.  223142 2f4156
-->
<template>
    <el-scrollbar class="wrapper" height="400px">
        <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 routes" :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 { computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default {
    name: "LayoutAside",
    setup()
    {
        const router = useRouter();//路由
        const routes = router.getRoutes();//路由数组
        const store = useStore();

        //用于判断一个路由是否只有一项子路由
        const hasOnlyChild = (children) =>
        {
            //防御验证
            if (!children)
            {
                return false;
            }

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

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

            return false;
        };

        //计算变量
        //获取当前的路由
        const currentPath = computed(() =>
        {
            let path = useRoute().path;

            return path;
        });

        //获取导航栏是否折叠的标志
        const asideCollapse = computed(() =>
        {
            return store.state.app.ui.asideBarCollapse;
        });

        return {
            router,
            routes,
            hasOnlyChild,
            currentPath,
            asideCollapse,
        };
    },
};
</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;
}

.el-menu-item {
    font-weight: normal;
}

.el-sub-menu {
    font-weight: normal;
}

/* 顺序必须在上面两个之后*/
.is-active {
    background-color: #ffffff4f !important;
    /* font-weight: 1000; */
    /* font-size: 15px; */
    color: #ffd04b;
}

/* .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%;
    /* min-height: 400px; */
}
</style>