1.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建index.vue文件
这个文件里写入
<template> <div class="common-layout"> <el-container> <el-aside width="auto"><!-- 侧边菜单栏组件--> <nav-side v-model:collapse="iscollapse"></nav-side> </el-aside> <el-container> <el-header><!-- 头部组件--> <nav-header v-model:collapse="iscollapse"></nav-header> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </div></template><script lang="ts" setup>import {ref} from 'vue'import navheader from './navheader/index.vue'import navside from './navside/index.vue'const iscollapse=ref<boolean>(false) </script> <style lang="scss" scoped> .el-header { padding: 0; border-bottom: 1px solid #eeeeee;}</style>
2.在router文件下的index.ts写入
// @ts-ignoreimport { createrouter, createwebhistory, routerecordraw } from 'vue-router'const routes: array<routerecordraw> = [ { 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文件
在文件里写入
<template> <div class="header"> <div @click="shrink"><!-- 伸缩图标--> <expand v-if="collapse==true"></expand> <fold v-else></fold> </div> </div></template> <script lang="ts" setup>import {ref} from 'vue'let props=defineprops<{ collapse:boolean}>()let emits=defineemits(['update:collapse'])const shrink=()=>{ emits('update:collapse',!props.collapse)}</script> <style lang="scss" scoped>.header { height: 60px; padding: 0 20px; display: flex; align-items: center;}</style>
4.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navside文件，在navside文件下创建index.vue文件
在文件里写入
<template> <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="collapse" > <el-menu-item index="1"> <el-icon><house></house></el-icon> <template #title>导航一</template> </el-menu-item> <el-menu-item index="2"> <el-icon><message></message></el-icon> <template #title>导航二</template> </el-menu-item> <el-menu-item index="3"> <el-icon><grid></grid></el-icon> <template #title>导航三</template> </el-menu-item> <el-menu-item index="4"> <el-icon><tools></tools></el-icon> <template #title>导航四</template> </el-menu-item> </el-menu></template> <script lang="ts" setup>import {ref} from 'vue'let props=defineprops<{ collapse:boolean}>()</script> <style lang="scss" scoped>.el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px;}</style>
这就是封装伸缩菜单栏组件的代码。
以上就是vue3伸缩菜单组件怎么使用的详细内容。