Vue3 第十六篇：常用组件：无限级菜单组件

1.新建LeftMenu.jsx文件，内容如下： 

import router from '@/router'
import { ref } from 'vue'
// 菜单列表
const menuList = [
    {
        id: "1",
        name: '权限',
        children: [
            {
                id: "12",
                name: '菜单列表',
                children: [
                    {
                        id: "122",
                        name: '菜单列表',
                        url: '/layout/1'
                    }
                ]
            }
        ]
    },
    {
        id: "2",
        name: '角色',
        url: '/layout/2'
    }
]

export const isCollapse = ref(false)
// el-menu节点
const Menu = () => {



    const handleOpen = () => {
        layer.msg("成功消息", { icon: 1, time: 1000 })
    }

    const handleClose = () => {
        layer.msg("成功消息", { icon: 1, time: 1000 })
    }

    return (
        <>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                collapse={isCollapse.value}
                onOpen={handleOpen}
                onClose={handleClose}
            >
                {
                    menuList.map(menu => {
                        if (menu.children) {
                            return <SubMenu menu={menu}></SubMenu>
                        } else {
                            return (
                                <>
                                    <MenuItem index={menu.id} name={menu.name} url={menu.url}></MenuItem>
                                </>
                            )
                        }
                    })
                }
            </el-menu>
        </>
    )
}

// el-sub-menu节点
const SubMenu = (props) => {
    const { menu } = props
    // 定义具名插槽：title
    const slots = {
        title: () => {
            return (
                <>
                    <span>{menu.name}</span>
                </>
            )
        }
    }

    return (
        <>
            <el-sub-menu index={menu.id} v-slots={slots}>{/* 传入插槽 */}
                {
                    menu.children.map(x => {
                        if (x.children) {
                            // 递归
                            return (
                                <>
                                    <SubMenu menu={x}></SubMenu>
                                </>
                            )
                        } else {
                            //实际节点，则渲染
                            return (
                                <>
                                    <MenuItem index={x.id} name={x.name} url={x.url}></MenuItem>
                                </>
                            )
                        }
                    })
                }
            </el-sub-menu>
        </>
    )
}



// el-menu-item节点
const MenuItem = (props) => {
    // 处理菜单被点击
    const handleMenuItemClick = () => {
        router.push(props.url)
    }

    return (
        <>
            <el-menu-item onClick={handleMenuItemClick} index={props.index}>
                {props.name}
            </el-menu-item>
        </>
    )
}

export default Menu

2.使用：

import Menu from '../nav/left-menu/LeftMenu';

 3.修改一下路由：

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: () => import('@/components/HelloWorld.vue')
        },
        {
            path: '/layout',
            component: () => import('@/components/layout/LayoutMain.vue'),
            children: [
                {
                    path: '1',
                    component: () => import('@/views/page1.vue')
                }, {
                    path: '2',
                    component: () => import('@/views/page2.vue')
                },
            ]
        }
    ]
})
export default router

3.效果