67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<div class="kl-menu">
|
|
<el-scrollbar height="100%">
|
|
<el-menu class="el-menu-vertical" :default-active="activeRouteComputed" router>
|
|
<KlMenuItem
|
|
v-for="menu in childRoutes"
|
|
:key="menu?.component?.toString()"
|
|
:title="menu?.meta?.title + ''"
|
|
:children="menu.children"
|
|
:index="menu.path"
|
|
/>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import KlMenuItem from './kl-menu-item.vue'
|
|
import { RouteRecordRaw, useRoute } from 'vue-router'
|
|
import { computed } from 'vue'
|
|
|
|
const modulesFiles = import.meta.globEager('@/router/modules/*.ts')
|
|
const childRoutes: RouteRecordRaw[] = []
|
|
Object.keys(modulesFiles).forEach((path: string) => {
|
|
const module = modulesFiles[path] as any
|
|
if (module?.default) {
|
|
childRoutes.push(...module.default)
|
|
}
|
|
}, {})
|
|
|
|
const route = useRoute()
|
|
const activeRouteComputed = computed(() => {
|
|
return route.path
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.kl-menu {
|
|
height: 100%;
|
|
::v-deep(.el-scrollbar) {
|
|
.el-scrollbar__bar.is-vertical {
|
|
display: block !important;
|
|
.el-scrollbar__thumb {
|
|
width: 0px;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-menu-vertical {
|
|
border: none;
|
|
.el-sub-menu__title,
|
|
.el-menu-item {
|
|
font-size: 15px;
|
|
}
|
|
.el-menu-item.is-active {
|
|
background-color: #ebf1ff;
|
|
border-right: 4px solid $color-primary;
|
|
}
|
|
.el-sub-menu {
|
|
.el-menu-item {
|
|
text-indent: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|