Vue前端项目-首页-左侧菜单栏的展开与折叠

目录

1、思路

2、按钮单击事件

3、父组件调用 Vuex 改变侧边栏状态

4、新建app模块用于管理整个应用状态

5、左侧菜单栏

6、隐藏样式

---

实现效果

展开效果图:

合并效果图:

 

1、思路

• 点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制
• 为什么要用 state.sidebar.opened 全局变量? 原因是按钮组件与侧边栏组件不是父子组件的关系，按钮点击事件改变 state.sidebar.opened 值为 true 或 false。侧边栏组件需要读取 state.sidebar.opened 来决定自己是要展开还是折叠？
• 左侧 el-menu 组件中有 collapse 属性是控制菜单栏的展开与收缩。我们可以通过  state.sidebar.opened 值，来控制 el-menu元素
• 只是设置 el-menu 中 collapse 属性还是不够的, 还需要配置 左边侧边栏的隐藏样式, 通过state.sidebar.opened 动态显示样式

2、按钮单击事件

在 src / components / Hamburger / index.vue (按钮组件) 中

新增单击事件

<div style="padding: 0 15px;" @click="toggleClick">

单击事件中调用父组件方法

    toggleClick() {

      this.$emit('toggleClick')

    }

具体代码:

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4