仓库管理系统-6-前端之头页面Header和菜单导航页面Aside伸缩

文章目录

• 1 编写Header头页面
• • 1.1 dropdown下拉菜单
  • 1.2 菜单伸缩图标
  • 1.3 欢迎字样
  • 1.4 Header.vue
• 2 菜单导航页面编写
• • 2.1 菜单容器和菜单项
  • 2.2 Aside.vue
• 3 菜单导航页面伸缩
• • 3.1 实现原理
  • • 3.1.1 子提交和接收父(Header<->index)
    • 3.1.2 父传子(index->Header)
    • 3.1.3 父传子(index->Aside)
    • 3.1.4 子接收父(Aside<-index)
  • 3.2 index.vue(父组件)
  • 3.3 Header.vue(子组件)
  • 3.4 Aside.vue(子组件)

编写Header头页面，通过菜单伸缩图标控制菜单导航页面Aside的伸缩，使用组件间的通信技术，父传子(props)，子传父(this.$emit)。

1 编写Header头页面

(1)dropdown下拉菜单 (2)菜单伸缩图标 (3)欢迎字样 (4)去除背景，加下边框

1.1 dropdown下拉菜单

这是一个具名插槽，slot名为dropdown，表示这是下拉菜单的内容。

<el-dropdown>
<span>王小虎</span>
<i