Menu菜单导航封装

封装el-Menu

• 目前在编写管理端，页面有用到el-Menu，所以对el-Menu做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，一直用越一直爽。

分析问题：

• el-Menu是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：
• 样式，颜色，自定义，
• 最重要的是；递归渲染（不用关心它的子集）
• 等等.

递归渲染实现。

<template>
  <div>

    <div v-for = "(item,index) in folder"  :key="index" :class="[collapse?'collapseBox':'',mode]">
      <!--这里判断是否有子集，主要是为了不展示最右边ICON下拉图标-->
      <el-submenu v-if="item.childLabel" :index="item.index" :disabled="item.disabled">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span slot="title" :class="collapse?'collapse':''">{{item.label}}</span>
        </template>
        <!--自调用-->
        <treelist :folder = "item.childLabel"></treelist>
      </el-submenu>
      <el-menu-item v-else=""  :index="item.index" :disabled="item.disabled">
        <i class="iconfont" :class="item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
  export default {
    props:["folder","mode","collapse"],
    name: 'treelist',
    data () {
      return {
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  >>>.horizontal{
    float: left;
  }
  >>>.horizontal .el-submenu__icon-arrow.el-icon-arrow-down{
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: 2px;
  }
  >>>.collapse{
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  .collapseBox{
    text-align: center;
  }
  >>>.collapse + .el-icon-arrow-right{
    display: none;
  }

  /*这个是为了兼容cli3.0*/
  ::v-deep .horizontal{
    float: left;
  }
  ::v-deep .horizontal .el-submenu__icon-arrow.el-icon-arrow-down{
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: 2px;
  }
  ::v-deep .collapse{
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  .collapseBox{
    text-align: center;
  }
  ::v-deep .collapse + .el-icon-arrow-right{
    display: none;
  }
</style>

• 以上代码配合组件内部代码使用（请看↓↓组件内部）。
• 详情及组件使用方法：( 请查看《Menu菜单导航API》)。

组件内部template：

<template>
  <div class="menu">
    <el-menu
      class="el-menu-demo"
      :mode="mode"
      :collapse="collapse"
      :default-active="defaultActive"
      :default-openeds="defaultOpeneds"
      :unique-opened="true"
      :background-color="backgroundColor"
      :text-color="textColor"
      :active-text-color="activeTextColor"
      :router="router"
      @open="handleOpen"
      @close="handleClose"
      @select="handleselect"
    >
      <treelist :folder = "trees" :mode="mode" :collapse="collapse"></treelist>
    </el-menu>
  </div>
</template>
<script>
import treelist from './components/treelist'
export default {
  name: 'wb-menu',
  props: {
    // 模式
    mode: {
      type: String
    },
    //是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
    collapse: {
      type: Boolean
    },
    // 默认选中
    defaultActive: {
      type: String
    },
    // 默认展开
    defaultOpeneds: {
      type: Array,
    },
    // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
    router: {
      type: Boolean,
    },
    // 菜单数据
    trees: {
      type: Array
    },
    // 菜单的背景色（仅支持 hex 格式: #FFF）
    backgroundColor: {
      type: String,
    },
    // 菜单的文字颜色（仅支持 hex 格式: #FFF）
    textColor: {
      type: String,
    },
    // 当前激活菜单的文字颜色（仅支持 hex 格式: #FFF）
    activeTextColor: {
      type: String,
    }

  },
  components: {
    treelist
  },
  data () {
    return {

    }
  },
  methods: {
    // 展开触发
    handleOpen (index, path) {
      this.$emit('handleOpen',path);
    },
    // 收起触发
    handleClose (index, path) {
      this.$emit('handleClose',path);
    },
    // 选择触发
    handleselect (index,path) {
      this.$emit('handleselect',path);
    },
  },
  mounted () {
    console.log(this.defaultActive)
  }
}
</script>
<style scoped>
  /*vue cli2.0*/
  >>>.el-menu{
    border-right: none;
  }
  /*vue cli3.0*/
  ::v-deep .el-menu{
    border-right: none;
  }
  >>>.el-menu-vertival-demo:not(.el-menu--collapse){
    width: 200px;
    min-height: 400px;
  }
  ::v-deep .el-menu-vertival-demo:not(.el-menu--collapse){
    width: 200px;
    min-height: 400px;
  }
</style>