前端基础学习-应用组件写菜单

应用组件写菜单

开发工程中会发现，对于菜单的菜单项，可能有多种情况，有的有多重子菜单，而有的无子菜单，如果写成固定模式，那么若改变菜单模式，则需要改变大量代码，这里如果调用组件，并且在需要的地方，经过判断重复调用，可以大大提高效率

主要思想是：
讲菜单项分成有子菜单和无子菜单的情况，无子菜单的情况，直接调用el-menu-item，若有子菜单，则调用el-submenu，如果子菜单还有子菜单，重复调用即可

这里主要分成了两个组件：menuItem与menuSub
menuItem对应无子菜单情况
menuSub对应有子菜单情况

话不多说，上代码
菜单结构

// menuList的目的是为了在首页菜单部分引入，他们直接存在父子关系
export default [
  {
    title: '基础学习',
    path: '/baseLearn',
    name: 'baseLearn',
    children: [
      {
        path: 'formLearn',
        name: 'formLearn',
        title: '表单学习',
        children: [
          {
            path: 'formValid',
            name: 'formValid',
            title: '表单校验'
          }
        ]
      },
      {
        path: 'tableLearn',
        name: 'tableLearn',
        title: 'table学习'
      }
    ]
  },
  {
    title: '测试',
    path: 'test',
    name: 'test'
  }
]

对应菜单引入的组件

// routerList的目的是为了引入对应组件，他们直接没有父子的关系
export default [
  {
    path: 'formLearn',
    name: 'formLearn',
    title: '表单学习',
    component: () => import('@/pages/basic/form/index')
  },
  {
    path: 'formValid',
    name: 'formValid',
    title: '表单校验',
    component: () => import('@/pages/basic/form/components/formValid')
  },
  {
    path: 'tableLearn',
    name: 'tableLearn',
    title: '表格学习',
    component: () => import('@/pages/basic/table/index')
  },
  {
    path: 'test',
    name: 'test',
    title: '测试',
    component: () => import('@/pages/basic/table/index')
  }
]

菜单部分

        <el-menu
          :default-active="active"
          ref="menunRef"
          @select="handleSelect"
          style="border:none"
          >
          <template v-for="menu in menusList">
            <!-- 如果当前菜单项没有children，则是menuitem，menu传递给子组件 -->
            <menu-item v-if="!menu.children || !menu.children.length" :menu="menu" :key="menu.path" :index="menu.path"/>
            <!-- 如果当前菜单项有children，则是menusub，menu，active传递给子组件 -->
            <menu-sub v-else :active="active" :menu="menu" :index="menu.path" :key="menu.path"/>
          </template>
        </el-menu>

menu-item组件

<template>
  <el-menu-item :index="menu.path" :key="menu.path">
    <span slot="title">{{menu.title || '未命名菜单'}}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'menuItem',
  props: {
    menu: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  data () {
    return {

    }
  }
}
</script>

menu-sub组件

<template>
  <el-submenu :index="menu.path" :path="active">
    <template slot="title">
      <span slot="title">{{menu.title}}</span>
    </template>
    <template v-for="child in menu.children">
      <menu-item v-if="child.children === undefined" :menu="child" :key="child.path"/>
      <menu-sub v-else :menu="child" :key="child.path"/>
    </template>
  </el-submenu>
</template>

<script>
import menuItem from '../components/menuItem'

export default {
  name: 'menuSub',
  components: {
    menuItem
  },
  props: {
    menu: {
      type: Object,
      required: false,
      default: () => {}
    },
    active: String
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">

</style>

效果