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 (按钮组件) 中

新增单击事件

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

    toggleClick() {

      this.$emit('toggleClick')

    }

具体代码:

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

在 src / layout / components / Navbar.vue 中

子组件调用父组件方法：

@toggleClick="toggleSideBar"/>

父组件调用 vuex 改变state.sidebar.opened 的值

    toggleSideBar() {

      this.$store.dispatch('app/toggleSideBar')

    }

具体代码：

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

新建 src / store / modules / app.js 内容为:

import Cookies from 'js-cookie'

const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  }
}
const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  }
}
const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

5、左侧菜单栏

在 src / layout / components / Sidebar / index.vue 中

控制 el-menu 的展开和折叠

      :collapse="isCollapse" />

isCollapse方法：

 isCollapse() {

      return !this.sidebar.opened

    }

具体代码：

6、隐藏样式

在 src / assets / styles / sidebar.scss 中, 新增隐藏样式

#app {
  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    position: relative;
  }

  .sidebar-container {
    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;

    .scrollbar-wrapper {
      height: 100%;
      overflow-x: hidden !important;

      .el-scrollbar__wrap {
        overflow-x: hidden !important;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
      }
      .el-menu {
        border: none;
        height: 100%;
        width: 100% !important;
      }

      .svg-icon {
        margin-right: 16px;
      }

    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }

    .main-container {
      margin-left: 54px;
    }

    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }
      }
    }

    .el-submenu {
      overflow: hidden;

      &>.el-submenu__title {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }

    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }

}