1、效果
折叠效果--只剩图标
展开效果--有图标有文字
&nbs p; 2、主要逻辑代码
home.vue--主页代码
<template> <div class="common-layout"> <el-cont ai ner> <!-- 侧边栏菜单 --> <el-aside width="auto"> <nav-menu :collpase=" stat e.isCollapse"/> </el-aside> <el-container> <el-header> <nav-header v-model:collpase="state.isCollapse" /> </el-header> <el-main> ;m ain</el-main> </el-container> </el-container> </div> </template> <script SETUP lang='ts'> import {ref, reactive } From 'vue' import NavMenu f rom '@/ component s/navMenu/index.vue' import NavHeader from '@/components/navHeader/index.vue' const state = reactive({ // 控制折叠与展开 isCollapse: false }) </script> <style sco PE d lang="scss"> .COM mon-layout { width: 100%; h ei ght: 100%; .el-container { height: 100%; // 就是不折叠的时候 宽 度是200px,折叠的时候宽度自适应 } } svg { width: 1em; height: 1em; m arg in-right: 5px; } </style>
nav-menu组件,侧边菜单组件代码
<template> <el-menu default-active="2" class="el-menu-vert ical -demo" :collapse=" PR ops.collpase" > <el-menu -i tem index="1"> <el-icon-menu /> <template # t IT le>图标选择器</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 -s tar /> <template #title>待定</template> </el-menu-item> </el-menu> </template> <script setup lang='ts'> const props = define Props<{ collpase: boolean }>() </script> <style scoped lang="scss"> svg { width: 1em; height: 1em; mar gin -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-e xp and 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 vite element-plus搭建的,值的注意的时候,里面的图标组件是经过处理的,所以使用起来,回和常规使用不一样,将el-icon-xx替换为常规的element-plus图标组件使用方式即可
您可能感兴趣的 文章 : Vue结合Element-Plus封装递归组件实现目录示例 Vue3+Vite+TS实现二次封装element-plus业务组件sfasga vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析 vue3集成Element-plus实现按需自动引入组件的方法总结 利用Vue3和element-plus实现图片上传组件 vue实现伸缩菜单功能
总结
以上是 为你收集整理的 vue3 element-plus二次封装组件系列之伸缩菜单制作 全部内容,希望文章能够帮你解决 vue3 element-plus二次封装组件系列之伸缩菜单制作 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于vue3 element-plus二次封装组件系列之伸缩菜单制作的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did204042