【Vue3+Vite+TS】9.0 改造项目整体结构

优化菜单

这里存在一个bug,修复如下:
修改src\components\baseline\menu\src\index.vue

<template>
    <div>
        <el-menu
            class="el-menu-vertical-demo"
            :default-active="defaultActive"
            :router="router"
            v-bind="$attrs"
        >
            <template v-for="(item, index) in data" :key="index">
                <!-- 一级无二级菜单的菜单栏 -->
                <el-menu-item
                    v-if="!item.children || !item.children.length"
                    :index="item.index"
                >
                    <component v-if="item.icon" :is="item.icon"></component>
                    <span>{{ item.name }}</span>
                </el-menu-item>
                <el-sub-menu
                    v-if="item.children && item.children.length"
                    :index="item.index"
                >
                    <template #title>
                        <component v-if="item.icon" :is="item.icon"></component>
                        <span>{{ item.name }}</span>
                    </template>
                    <!-- 二级菜单栏 -->
                    <el-menu-item
                        v-for="(item2, index2) in item.children"
                        :index="item2.index"
                    >
                        <component
                            v-if="item2.icon"
                            :is="item2.icon"
                        ></component>
                        <span>{{ item2.name }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { MenuItem } from './types'

const props = defineProps({
    //说明:
    data: {
        required: true,
        type: Array as PropType<MenuItem[]>,
    },
    // 默认选中的菜单
    defaultActive: {
        type: String,
        default: '',
    },
    //是否是路由模式 router,
    //是否启用 vue-router 模式
    //启用该模式会在激活导航时以 index 作为 path 进行路由跳转
    router: {
        type: Boolean,
        default: false,
    },
})
// console.log('data:', props.data)
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 2rem;
    min-height: 4rem;
}
svg {
    margin-right: 
如若转载请注明原文及出处:https://www.dsiab.com/post/6269133d-a838-4244-ac40-0aa1601db87a
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: