el-menu封装

---

main.js引入全局组件

1. 组件

menu/index.vue

<template>
  <el-menu :unique-opened="true" :default-active="this.$store.state.menuData.menuActive" class="el-menu-vertical-demo" :background-color="backgroundColor" :text-color="textColor" :active-text-color="activeTextColor">
    <subMenu :menuList="sideNavMenu"></subMenu>
  </el-menu>
</template>

<script>
export default {
  name: "index",
  props: {},
  data() {
    return {
      backgroundColor: "#EAEEF6",
      textColor: "#3F434E",
      activeTextColor: "#2A60CC",
      // sideNavMenu: this.$store.state.menuData.sideNavMenu,
      // 菜单列表
      sideNavMenu: [
        {
          "id": 1,
          "name": "首页",
          "code": "01",
          "parentId": "",
          "path": "/home",
          "icon": "icon-home",
          "level": 1,
          "resourceType": 0,
          "systemType": "",
          "status": "",
          "sortOrder": 1,
          "children": ""
        },
        {
          "id": 2,
          "name": "关于",
          "code": "02",
          "parentId": "",
          "path": "/about",
          "icon": "icon-about",
          "level": 1,
          "resourceType": 0,
          "systemType": "",
          "status": "",
          "sortOrder": 2,
          "children": [
            {
              "id": 3,
              "name": "关于我们",
              "code": "0201",
              "parentId": "2",
              "path": "/aboutUs",
              "icon": "",
              "level": 2,
              "resourceType": 0,
              "systemType": "",
              "status": "",
              "sortOrder": 1,
              "children": ""
            }
          ]
        },
      ]
    }
  },
  mounted() { },
  methods: {},
  watch: {},
  created() { },
}
</script>

<style scoped>
.el-menu {
  text-align: left;
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>

menu/submenu.vue

<template>
  <div>
    <div v-for="(list,index) in this.menuList" :key="index">

      <!--      resourceType: 0 菜单，1 菜单（不显示），2 按钮-->
      <!--      1、resourceType: 0, children: null, 无子级，按最后一级菜单显示-->
      <!--      2、resourceType: 0, children: [], 有子级，按下拉菜单显示-->
      <!--      3、resourceType: 1, children: [], 有子级，按下拉菜单显示-->
      <!--      4、resourceType: 1, children: null, 无子级，不在菜单显示-->

      <div v-if="list.resourceType === 0" class="menu-nav">
        <el-submenu v-if="!!list.children" :key="list.id" :index="String(list.id)">
          <template slot="title">
            <i class="menu_icon" :class="list.icon"></i>
            <span slot="title">{{ list.name}}</span>
          </template>
          <subMenu :menuList="list.children"></subMenu>
        </el-submenu>
        <el-menu-item v-else :index="list.path">
          <router-link :target="targeLink(list.path)?'_blank':''" :to="list.path">
            <i class="menu_icon" :class="list.icon"></i>
            <span>{{list.name}}</span>
          </router-link>
        </el-menu-item>
      </div>
      <div v-else-if="list.resourceType === 1">
        <el-menu-item v-if="!!list.children" :index="list.path" :key="list.id">
          <router-link :target="targeLink(list.path)?'_blank':''" :to="list.path">
            <i class="menu_icon" :class="list.icon"></i>
            <span>{{list.name}}</span>
          </router-link>
        </el-menu-item>
      </div>

	  <!-- 侧栏数据简单可以使用以下简单封装 -->
      <!--      <el-submenu v-if="!!list.children" :key="list.id" :index="list.path">-->
      <!--        <template slot="title">-->
      <!--          <i :class="list.icon"></i>-->
      <!--          <span slot="title">{{ list.name}}</span>-->
      <!--        </template>-->
      <!--        <subMenu :menuList="list.children"></subMenu>-->
      <!--      </el-submenu>-->
      <!--      <el-menu-item v-else :index="list.path" :key="list.id">-->
      <!--        <span>{{list.name}}</span>-->
      <!--      </el-menu-item>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "submenu",
  data() {
    return {}
  },
  props: {
    menuList: Array
  },
  mounted() { },
  methods: {
    targeLink(path) {
      if (path === '/aboutUs') {
        return true
      } else {
        return false
      }
    }
  },
  watch: {},
  created() { },
}
</script>

<style lang="scss" scoped>
@import "style.scss";
</style>

menu/style.scss

@charset "utf-8";

/*********************侧栏菜单*********************/
/deep/ .el-menu-item,
/deep/ .el-submenu__title {
  font-size: 18px;
}

/*父节点鼠标移入样式*/
/deep/ .el-submenu__title:hover,
.el-submenu__title:hover [class*="el-icon-"],
.el-submenu__title:hover [class*=" icon-"],
.el-submenu__title:hover [class^=icon-],
.el-submenu__title:hover .menu_icon {
  color: $menu_active_text_color !important;
}

/*父节点选中字体和图标样式*/
/deep/ .el-submenu {

  &.is-opened.is-active {

    // .el-submenu__title [class*="el-icon-"],
    // .el-submenu__title [class*=" icon-"],
    // .el-submenu__title [class*="icon-"],
    &>.el-submenu__title .menu_icon,
    &>.el-submenu__title {
      color: $menu_active_text_color !important;
    }

    &>.el-submenu__title {
      font-weight: bold;
      background-color: $menu_active_bg_color !important;
    }
  }
}

/*子节点样式*/
/* .el-menu--inline .el-menu-item {
  padding-left: 80px !important;
} */

/*子节点鼠标移入选中样式*/
.el-menu-item:hover,
.el-menu-item:hover [class*=" icon-"],
.el-menu-item:hover [class^=icon-],
.el-menu-item.is-active {
  color: $menu_active_text_color !important;
  background-color: $menu_active_bg_color !important;
}

// router-link / a 标签
a {
  display: block;
  color: #3F434E;
}

.el-menu-item:hover a,
.el-menu-item.is-active a {
  color: $menu_active_text_color ;
}

/*小三角*/
/deep/ .el-submenu__icon-arrow {
  font-size: 18px;
}

/deep/ .el-icon-arrow-down:before {
  content: "\E790";
}

/*icon*/
[class*="el-icon-"],
[class*=" icon-"],
[class^=icon-] {
  font-size: 20px;
  margin-right: 5px;
  // color: #f00;
}

---

2. 调用

<Menu></Menu>