Vue()-常用组件之Menu组件

<template>
  <!-- 左下：菜单栏 -->
  <div class="menu-box-1">
    <div class="menu-box-2">
      <!--
        菜单：
          unique-opened = 是否只有菜单打开
          default-active = 正在高亮的菜单id
          collapse = 是否折叠
          参考文档：https://element.eleme.cn/#/zh-CN/component/menu
      -->
      <el-menu ref="el-menu"
          class="el-menu-style-1"
          :mode="this.$store.state.NavMenuBar.menu.mode"
          :collapse="this.$store.state.NavMenuBar.menu.collapse"
          :background-color="this.$store.state.NavMenuBar.menu.backgroundColor"
          :text-color="this.$store.state.NavMenuBar.menu.textColor"
          :active-text-color="this.$store.state.NavMenuBar.menu.activeTextColor"
          :default-active="this.$store.state.NavMenuBar.menu.defaultActive"
          :default-openeds="this.$store.state.NavMenuBar.menu.defaultOpeneds"
          :unique-opened="this.$store.state.NavMenuBar.menu.uniqueOpened"
          :menu-trigger="this.$store.state.NavMenuBar.menu.menuTrigger"
          :router="this.$store.state.NavMenuBar.menu.router"
          :collapse-transition="this.$store.state.NavMenuBar.menu.collapseTransition"
          @select="selectMenu"
      >
        <div v-for="(menu, index) in this.$store.state.NavMenuBar.menu.menuList" :key="index">
          <!-- 1 如果是子菜单 -->
          <el-menu-item v-if="!menu.childList && menu.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu.id) > -1"
                        :index="menu.id + '' ">
            <span class="menu-i"><i :class="menu.icon" :title="menu.name"></i></span>
            <span class="menu-name">{{ menu.name }}</span>
          </el-menu-item>
          <!-- 1 如果是父菜单 -->
          <el-submenu v-if="menu.childList && menu.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu.id) > -1"
                      :index="menu.id + '' ">
            <template slot="title">
              <span class="menu-i"><i :class="menu.icon" :title="menu.name"></i></span>
              <span class="menu-name">{{ menu.name }}</span>
            </template>
            <!-- 遍历其子项 -->
            <div v-for="(menu2, index) in menu.childList" :key="index">
              <!-- 2 如果是子菜单 -->
              <el-menu-item
                  v-if="!menu2.childList && menu2.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu2.id) > -1"
                  :index="menu2.id + '' ">
                <span class="menu-i"><i :class="menu2.icon" :title="menu2.name"></i></span>
                <span class="menu-name">{{ menu2.name }}</span>
              </el-menu-item>
              <!-- 2 如果是父菜单 -->
              <el-submenu
                  v-if="menu2.childList && menu2.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu2.id) > -1"
                  :index="menu2.id + '' ">
                <template slot="title">
                  <span class="menu-i"><i :class="menu2.icon" :title="menu2.name"></i></span>
                  <span class="menu-name">{{ menu2.name }}</span>
                </template>
                <!-- 遍历其子项 -->
                <div v-for="(menu3, index) in menu2.childList" :key="index">
                  <!-- 3 如果是子菜单 -->
                  <el-menu-item
                      v-if="!menu3.childList && menu3.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu3.id) > -1"
                      :index="menu3.id + '' ">
                    <span class="menu-i"><i :class="menu3.icon" :title="menu3.name"></i></span>
                    <span class="menu-name">{{ menu3.name }}</span>
                  </el-menu-item>
                  <!-- 3 如果是父菜单 -->
                  <el-submenu
                      v-if="menu3.childList && menu3.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu3.id) > -1"
                      :index="menu3.id + '' ">
                    <template slot="title">
                      <span class="menu-i"><i :class="menu3.icon" :title="menu3.name"></i></span>
                      <span class="menu-name">{{ menu3.name }}</span>
                    </template>
                    <!-- 4 -->
                    <div v-for="(menu4, index) in menu3.childList" :key="index">
                      <el-menu-item v-if="menu4.isShow !== false && $store.state.NavMenuBar.menu.showList.indexOf(menu4.id) > -1"
                                    :index="menu4.id + '' ">
                        <span class="menu-i"><i :class="menu4.icon" :title="menu4.name"></i></span>
                        <span class="menu-name">{{ menu4.name }}</span>
                      </el-menu-item>
                    </div>
                  </el-submenu>
                </div>
              </el-submenu>
            </div>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    // 点击子菜单时触发的回调
    // 参数：index=点击菜单index标识（不是下标，是菜单id）,
    // 		indexArray=所有已经打开的菜单id数组，形如：['1', '1-1', '1-1-1']
    selectMenu: function (/*index, indexArray*/) {
      //TODO 要通过vuex来改数据
      // this.$root.showMenuById(index);
    },
  },
  created() {
  }
}
</script>

<style scoped>
/* 1 2 配合，把滚动条隐藏 */
.menu-box-1 {
  width: calc(var(--nav-left-width) + 20px);
  height: 100%;
  overflow-y: auto;
}

.menu-box-2 {
  width: calc(var(--nav-left-width) + 1px);
  padding-bottom: 200px;
}

.menu-box-1 i[class^=el-icon-] {
  font-size: 16px;
}

.menu-box-2 .menu-i {
  display: inline-block;
  vertical-align: top;
  width: 29px;
}

/* 动画速度加快 */
.menu-box-1, .menu-box-2 * {
  transition: all 0.2s;
}

/* 隐藏右边框 */
.el-menu {
  border: 0px;
}

/* 一级菜单，高度45px */
.el-menu-item,
.el-submenu__title {
  height: 45px !important;
  line-height: 45px !important;
}

/* 二级以下菜单，高度40px */
.el-submenu .el-menu-item,
.el-submenu .el-submenu .el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

/* 二级菜单 左边距 */
.el-submenu .el-menu-item,
.el-submenu .el-submenu .el-submenu__title {
  padding-left: 2.5em !important;
}

/* 三级菜单 左边距 */
.el-submenu .el-submenu .el-menu-item,
.el-submenu .el-submenu .el-submenu .el-submenu__title {
  padding-left: 3.6em !important;
}

/* 四级菜单 左边距 */
.el-submenu .el-submenu .el-submenu .el-menu-item {
  padding-left: 4.7em !important;
}

</style>

/**
 * 主页-左侧菜单栏的状态数据
 */
const state = {
    /**
     * nav-menu-bar组件参数
     * Menu:
     *  mode:模式【 horizontal / vertical（默认）】
     *  collapse：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）【 true / false（默认）】
     *  background-color：菜单的背景色（仅支持 hex 格式）【 #ffffff（默认）】
     *  text-color：菜单的文字颜色（仅支持 hex 格式）【 #303133（默认）】
     *  active-text-color：当前激活菜单的文字颜色（仅支持 hex 格式）【 #409EFF（默认）】
     *  default-active：当前激活菜单的 index
     *  default-openeds：当前打开的 sub-menu 的 index 的数组
     *  unique-opened：是否只保持一个子菜单的展开【 true / false（默认）】
     *  menu-trigger：子菜单打开的触发方式(只在 mode 为 horizontal 时有效)【 hover（默认） / click】
     *  router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转【 true / false（默认）】
     *  collapse-transition：是否开启折叠动画【 （默认）true / false】
     *  menuList: 菜单列表
     *  showList: 显示的菜单ids
     */
    menu: {
        mode: 'vertical',
        collapse: false,
        backgroundColor: '',
        textColor: '#ffffff',
        activeTextColor: '#409eff',
        defaultActive: '1',
        defaultOpeneds: [],
        uniqueOpened: false,
        menuTrigger: 'hover',
        router: true,
        collapseTransition: true,
        menuList: [
            {
                id: '1',
                name: '监控中心',
                icon: 'el-icon-view',
                info: '对本系统的各种监控',
                childList: [
                    {id: '11', name: 'Redis控制台', url: 'sa-view-sp/sp-console/redis-console.html', info: 'redis常用工具'},
                    {id: '12', name: 'API请求日志', url: 'sa-view-sp/sp-apilog/api-log-list.html', info: '记录本系统所有的api请求'},
                    {id: '13', name: 'SQL 监控台', url: 'sa-view-sp/sp-console/sql-console.html', info: 'sql控制台'},
                    {id: '14', name: '在线表单构建', url: 'https://mrhj.gitee.io/form-generator/#/'},
                ]
            },
        ],
        showList: ['1', '11', '12', '13'],		// 显示的菜单集合（id集合）
    },
};
const getters = {};
const mutations = {

};
const actions = {};
const modules = {};

export default {
    state,
    getters,
    mutations,
    actions,
    modules
}