noob-components/packages/manage/head/menu-tree.vue

<template>
    <el-menu :default-active="active" router :mode="mode" :class="mode" :text-color="state.style.menuColor"
        :background-color="mode == 'horizontal' ? state.style.headBg : state.style.menuBg"
        :active-text-color="state.style.menuActiveColor" :size="state.size.size">
        <template v-for="menu in data || state.menus">
            <template v-if="menu.children && menu.children.length > 0">
                <el-sub-menu :index="getPath(menu)" :key="menu.path">
                    <template #title>
                        <component class="icon" :is="menu.icon || state.style.menuDefaultIcon">
                        </component>
                        <span>{{ menu.title || t(menu.i18n) }}</span>
                    </template>
                    <el-menu-item v-for="child in menu.children" :index="getPath(child)" :router="router">
                        <component class="icon" :width="getters.menuIconSize" :height="getters.menuIconSize"
                            :is="child.icon || state.style.menuDefaultIcon">
                        </component>
                        {{ child.title || t(child.i18n) }}
                    </el-menu-item>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="getPath(menu)" :key="menu.path" :router="router">
                    <component class="icon" :is="menu.icon || state.style.menuDefaultIcon"></component>
                    <span>{{ menu.title || t(menu.i18n) }}</span>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue"
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, getters } = useStore()
const props = defineProps({
    mode: {
        type: String,
        default: 'vertical'
    },
    data: {
        type: Array<any>(),
        default: null
    },
});

const style = reactive({ 'margin-right': '10px', width: getters.menuIconSize, height: getters.menuIconSize })
const router = useRouter();
const getPath = (menu) => {
    const prefix = menu.path.startsWith("/") ? "" : "/";
    return prefix + menu.path;
};
const active = ref("");
onMounted(() => {
    setTimeout(() => {
        active.value = router.currentRoute.value.path.substring(1);
    }, 200);
    router.push(active.value);
})

</script>

<style scoped lang="scss">
.horizontal {
    padding-top: 1px;
    height: v-bind('state.size.headHeight');
    border: none;
    // display: inline-flex;
}

.vertical {
    padding-top: 1px;
    height: v-bind('state.size.mainHeight');
    border: none;
}

.icon {
    margin-right: 10px;
    width: v-bind('state.size.menuIconSize');
    height: v-bind('state.size.menuIconSize');
}

.el-menu-item.is-active {
    background-color: v-bind('state.style.menuActiveBg');
}

.vertical .el-sub-menu,
.vertical .el-menu-item {
    min-width: v-bind('state.size.asideWidth') !important;
    font-size: v-bind('state.size.fontSize') !important;
}

.horizontal .el-sub-menu,
.horizontal .el-menu-item {
    font-size: v-bind('state.size.fontSize') !important;
}
</style>