本篇内容主要讲解“怎么使用vue3 element-plus二次封装组件制作伸缩菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用vue3 element-plus二次封装组件制作伸缩菜单”吧!
1、效果
折叠效果--只剩图标
展开效果--有图标有文字
2、主要逻辑代码
home.vue--主页代码
<template> <div class="common-layout"> <el-container> <!-- 侧边栏菜单 --> <el-aside width="auto"> <nav-menu :collpase="state.isCollapse"/> </el-aside> <el-container> <el-header> <nav-header v-model:collpase="state.isCollapse" /> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template> <script setup lang='ts'>import {ref, reactive } from 'vue'import NavMenu from '@/components/navMenu/index.vue'import NavHeader from '@/components/navHeader/index.vue' const state = reactive({ // 控制折叠与展开 isCollapse: false}) </script><style scoped lang="scss"> .common-layout { width: 100%; height: 100%; .el-container { height: 100%; // 就是不折叠的时候宽度是200px，折叠的时候宽度自适应 } } svg { width: 1em; height: 1em; margin-right: 5px; }</style>nav-menu组件，侧边菜单组件代码
<template> <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="props.collpase" > <el-menu-item index="1"> <el-icon-menu /> <template #title>图标选择器</template> </el-menu-item> <el-menu-item index="2"> <el-icon-aim /> <template #title>省市区组件</template> </el-menu-item> <el-menu-item index="3"> <el-icon-star /> <template #title>待定</template> </el-menu-item> </el-menu></template> <script setup lang='ts'>const props = defineProps<{ collpase: boolean}>()</script><style scoped lang="scss"> svg { width: 1em; height: 1em; margin-right: 5px; } // 记得要有这个，控制侧边菜单宽度，意思是折叠的时候，宽度自适应，不着折叠的时候宽度为200px .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } .el-menu { height: 100%; }</style>nav-header组件的代码
<template> <div class="collapse" @click="handleCollapse"> <el-icon-expand v-if="props.collpase"></el-icon-expand> <el-icon-fold v-else></el-icon-fold> </div></template> <script setup lang='ts'>const props = defineProps<{ collpase: boolean}>()const emits = defineEmits<{ // 这样写，父组件通过v-model传值进来，父组件那边就不用在定义事件改变这里传过去的值了 // update:collpase 就会自动改变v-model传过来的值了 (e:'update:collpase', value:boolean):void}>() const handleCollapse = ()=>{ emits('update:collpase', !props.collpase)} </script><style scoped lang="scss">.collapse { width: 2em; svg { width: 2em; height: 2em; }}</style>到此，相信大家对“怎么使用vue3 element-plus二次封装组件制作伸缩菜单”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
