背景知识

侧边导航栏一般用在后台管理系统中，我们用element-plus更容易实现

基本布局

 我们可以去 element-plus 官网找布局的容器组件，网址：Container 布局容器 | Element Plus

我们一般选择这个来布局侧边导航栏

Menu菜单

再去 element-plus 官网找菜单的组件，网址：Menu 菜单 | Element Plus

我们选择垂直导航菜单，后台管理系统彩带一般都可以被折叠，通过绑定一个变量来设定当前是否展开或关闭

具体代码

App.vue

引入的 NarBar.vue 源码：

引入的 HeaderContent.vue 源码

核心解释

因为点击收起或展开的按钮在 HeaderContent.vue 中，而绑定收起或展开的变量在NarBar.vue中，所以我们需要在父组件中传入一个方法，在子组件触发，并且在  NarBar.vue 中必须将控制展开和收起的变量暴露出去，用vue3中的 defineExpose 方法，在通过 ref 绑定即可控制暴露的变量

tips：父组件为  App.vue

根据 element-plus 官网设计容易遇到的问题

如果上面的代码把 width 属性设置成  "具体尺寸"px，比如 100 px，当 NarBar.vue中绑定展开或收起的变量发生改变时候，右侧的内容不会随着左侧的内容变化而变化，而是会固定在初始位置不动

如何解决？

很简单，不设置成 "具体尺寸"px 这种格式即可

这个问题官网没有具体的解答，但是网上是有相关的处理方式的

代码有问题或有疑问欢迎在评论区讨论

推荐文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：