vue3伸缩菜单组件怎么使用

效果图

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

这个文件里写入 

import {ref} from 'vue'
import navHeader from './navHeader/index.vue'
import navSide from './navSide/index.vue'
const isCollapse=ref(false)
 

 

 
.el-header {
 padding: 0;
  border-bottom: 1px solid #eeeeee;
}

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文件

在文件里写入

 

import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()
let emits=defineEmits(['update:collapse'])
const shrink=()=>{
  emits('update:collapse',!props.collapse)
}

 

.header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

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

在文件里写入

    
    
      
      导航二
    
    
      
      导航三
    
    
      
      导航四
    
  

 

import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()

 

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

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