57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { usePermissionStore } from "@/store/modules/permission";
|
|
import variables from "@/styles/variables.module.scss";
|
|
import { useAppStore } from "@/store/modules/app";
|
|
import { translateRouteTitleI18n } from "@/utils/i18n";
|
|
const appStore = useAppStore();
|
|
const activePath = computed(() => appStore.activeTopMenu);
|
|
const selectMenu = (index: string) => {
|
|
appStore.changeTopActive(index);
|
|
};
|
|
const permissionStore = usePermissionStore();
|
|
const topMenu = ref<any[]>([]);
|
|
onMounted(() => {
|
|
topMenu.value = permissionStore.routes.filter((el) => !el.meta?.hidden);
|
|
});
|
|
</script>
|
|
<template>
|
|
<el-scrollbar>
|
|
<el-menu
|
|
mode="horizontal"
|
|
:default-active="activePath"
|
|
:background-color="variables.menuBg"
|
|
:text-color="variables.menuText"
|
|
:active-text-color="variables.menuActiveText"
|
|
@select="selectMenu"
|
|
>
|
|
<el-menu-item
|
|
v-for="route in topMenu"
|
|
:key="route.path"
|
|
:index="route.path"
|
|
>
|
|
<template #title>
|
|
<svg-icon
|
|
v-if="route.meta && route.meta.icon"
|
|
:icon-class="route.meta.icon"
|
|
/>
|
|
<span v-if="route.meta && route.meta.title">{{
|
|
translateRouteTitleI18n(route.meta.title)
|
|
}}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
<!-- <sidebar-item
|
|
v-for="route in topMenu"
|
|
:key="route.path"
|
|
:item="route"
|
|
:base-path="route.path"
|
|
:is-collapse="false"
|
|
/> -->
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.el-menu {
|
|
height: 50px !important;
|
|
}
|
|
</style>
|