vue + element-ui制作折叠式菜单

 

近期打算做一个进销存系统，因为好久没做前端了，花了一天的时间复习了下vue，用element-ui做了个折叠式菜单。其中复习到的知识点有

transition动画，vuex状态管理，vue-route路由。

1.设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../pages/Home'
import Sale from '../pages/sale/index'
import Stock from '../pages/stock/index'

Vue.use(VueRouter)

//将路由配置在数组对象中
export const mapMenu = [
  {
    path: '/',
    name: 'home',
    component: Home,
    noMenu: true
  },
  {
    path: '/lock',
    name: '锁屏页',
    component: Sale,
    noMenu: true
  },
  {
    path: '/dashboard',
    name: '首页',
    meta: { title: '首页', icon: '' },
    component: null
  },
  {
    path: '/sale',
    name: 'sale',
    component: Home,    //设置字组件的父组件
    meta: { title: '销售管理', icon: '' },
    children: [
      {
        path: '/sale/offer',
        name: 'offer',
        component: Sale,    
        meta: { title: '销售报价单', icon: '' }
      },
      {
        path: '/sale/indent',
        name: 'indent',
        component: Stock,
        meta: { title: '销售订货单', icon: '' }
      }
    ]
  },
  {
    path: '/stock',
    name: '库存管理',
    component: Home,
    meta: { title: '库存管理', icon: '' },
    children: [{
      path: '/stock/outStock',
      name: '出库管理',
      meta: { title: '出库管理', icon: '' },
      component: null
    },
    {
      path: '/stock/putStock',
      name: '入库管理',
      meta: { title: '入库管理', icon: '' },
      component: null
    },
    {
      path: '/stock/endMonthHandle',
      name: '月末处理',
      meta: { title: '月末处理', icon: '' },
      component: null
    }
    ]
  }
]
//实例化路由
const router = new VueRouter({
  routes: mapMenu
})

export default router

 新手在使用嵌套路由时，容易弄混子路由和父路由之间的建立关系。子路由的组件必须包含在父路由中，父组件下的router-view才能接受到信息，进行跳转。反之不会发生跳转。

2.vuex状态管理

因为后期需要进行前后端交互，涉及到用户的权限问题，所以把路由信息放进vuex状态管理中。这里我新建一个user.js，主要用来管理用户信息（以后的文章中会讲解）

import { mapMenu } from '../../router'

const user = {
  state: {
    menus: mapMenu
  }
}
export default user

 通过getters来获取用户信息。

const getters = {
  menus: state => state.user.menus,
  barEffect: state => state.app.barEffect
}

export default getters

现在为大家讲解一下vuex的几个知识点。

state：定义状态存储的对象和对象初始化，state确认之后，程序运行时便不可动态添加对象。

mutations：对state的对象进行操作，切记，该操作为同步

actions：同样是对state的对象进行操作，那有了mutations，为什么还要用actions呢？mutations是只支持同步，而actions能通过异步来触发mutations里的操作。

const app = {
  state: {
    barEffect: {
      open: true
    }
  },
  mutations: {
    TOGGLE_BAREFFECT: state => {              //建议用大写加下划线定义mutations的方法
      state.barEffect.open = !state.barEffect.open
    }
  },
  actions: {
    ToggleBarEffect: ({ commit }) => {
      commit('TOGGLE_BAREFFECT')    //触发mutations中的TOGGLE_BAREFFECT
    }
  }
}

以上定义了一个barEffect对象，用来存储菜单栏是否折叠的状态

 

3.菜单栏

首先我们需要编写一个LeftMenu组件

import { mapGetters } from 'vuex'
  import MenuItem from './modules/MenuItem'
  export default {
    name: 'left-menus',
    components: { MenuItem },
    computed: {
      ...mapGetters([
        'menus',
        'barEffect'
      ]),
      isCollapse() {
        return !this.barEffect.open
      }
    }
  }

el-scrollbar是element默认的滚动条，可通过wrapClass和viewClass设置外部样式和内部样式。

el-menu中的属性自己去element-ui中查看。

接下来我们在定义menu-item菜单项

到了这一步我们的折叠菜单基本就完成了，实现的效果如下