vue3中的伸缩菜单组件

目录

• vue3伸缩菜单组件
• 效果图
• 总结

vue3伸缩菜单组件

最近一直在学习分装组件，学到了一个伸缩菜单栏组件，浅浅的记录一下，想要封装菜单的，代码可以直接拿去用，稍作修改即可！

效果图

1.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建index.vue文件

这个文件里写入 

2.在router文件下的index.ts写入 

// @ts-ignore
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array = [
    {
        path:'/',
        component:()=>import('../components/container/src/index.vue'),
        children:[
            {
                path: '/',
                name: 'home',
                component:()=>import('../view/home.vue'),
            }
        ]
    },
 
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

3.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navHeader文件，在navHeader文件下创建index.vue文件

在文件里写入

4.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navSide文件，在navSide文件下创建index.vue文件 

在文件里写入

这就是封装伸缩菜单栏组件的代码。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。