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

<template>
    <el-menu :default-active="active" router class="menu-tree" :text-color="state.style.menuColor"
        :background-color="state.style.menuBg" :active-text-color="state.style.menuActiveColor" :size="state.size.size">
        <template v-for="menu in data">
            <template v-if="menu.children && menu.children.length > 0">
                <el-sub-menu :index="menu.path" :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="child.path" :router="router">
                        <component class="icon" :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="menu.path" :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 } from "vue"
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

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

const router = useRouter();
const clickMenu = (menu) => {
    router.push(menu.path);
};
const active = ref("");

const defTitle = "";

onMounted(() => {
    setTimeout(() => {
        active.value = router.currentRoute.value.path.substring(1);
    }, 200);
    router.push(active.value);
})

</script>

<style scoped lang="scss">
.menu-tree {
    padding-top: 1px;
    height: v-bind('state.size.mainHeight');
    border: none;
}

.icon {
    // margin-left: -15px;
    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');
}

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