AntDesign中a-menu的使用案例

<template>
  <div class="nav-bar" :class="{ collapsed: collapsed }">
    <div class="collapse-btn" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </div>
    <a-menu
      mode="inline"
      :open-keys="openKeys"
      @openChange="onOpenChange"
      :default-selected-keys="defaultKey"
      :inline-collapsed="collapsed"
    >
      <template v-for="item in routerList">
        <a-menu-item
          v-if="!item.children"
          :key="item.key"
          @click="onMenuClick(item)"
        >
          <template v-if="item.icon">
            <img
              :src="require('../assets/images/navIcon/' + item.icon + '.png')"
              class="title-img"
            />
          </template>
          <span>{{ item.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.key">
          <span slot="title">
            <template v-if="item.icon">
              <img
                :src="require('../assets/images/navIcon/' + item.icon + '.png')"
                class="title-img"
              />
            </template>
            <span>{{ item.name }}</span>
          </span>
          <a-menu-item
            v-for="child in item.children"
            :key="child.key"
            @click="onMenuClick(child)"
          >
            {{ child.name }}
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>
<script>
import Bus from '@/utils/eventBus'
import { getPermissionByUser } from '@/api/menu.js'
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage.js'
export default {
  data() {
    return {
      routerList: [],
      rootSubmenuKeys: [],
      openKeys: [],
      collapsed: false,
      defaultKey: [],
    }
  },
  created() {
    this.getDataList()
  },
  // computed: {
  //   path() {
  //     return this.$route.path
  //   }
  // },
  methods: {
    // 获取菜单列表数据
    getDataList() {
      getPermissionByUser().then(result => {
        if (result.status === 0) {
          this.routerList = result.data
          this.setDefaultAndOpenKeys()
        }
      })
    },
    // 设置默认defaultKey和openKeys
    setDefaultAndOpenKeys() {
      const allKey = []
      this.routerList.map(item => {
        allKey.push(item.key)
      })
      this.rootSubmenuKeys = allKey
      const key = getLocalStorage('currentMenuKey')
      const dk = key ? key : this.routerList[0].key
      this.$set(this.defaultKey, 0, dk)
      const open = getLocalStorage('currentOpenKeys')
      if (open || this.routerList[0].children) {
        const ok = open ? open : this.routerList[0].key
        this.$set(this.openKeys, 0, ok)
      }
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      )
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
      setLocalStorage('currentOpenKeys', openKeys[openKeys.length - 1])
    },
    onMenuClick(item) {
      this.$router.push(item.path)
      setLocalStorage('currentMenuKey', item.key)
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
      setLocalStorage('collapsed', this.collapsed)
      Bus.emit('menuCollapse', this.collapsed)
    },
  },
}
</script>
<style lang="scss">
.nav-bar {
  width: 212px;
  overflow-y: auto;
  position: relative;

  .collapse-btn {
    position: absolute;
    bottom: 27px;
    right: 25px;
    cursor: pointer;
  }

  .title-img {
    margin-right: 8px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .ant-menu {
    height: 100%;
    background: #09193a;
    padding: 8px 0 0 0;
  }

  .ant-menu-item-selected,
  .ant-menu-submenu-selected {
    color: #ffffff !important;
    .title-img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }
  }
}
.ant-menu-item:hover {
  color: #ffffff !important;
}

.nav-bar.collapsed {
  width: 52px;
  transition: all 0.6s ease;

  .collapse-btn {
    right: 15px;
  }

  .ant-menu-inline-collapsed {
    width: 52px;
  }

  .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
    padding: 0 0 0 18px !important;
  }

  .ant-menu-item {
    color: #d3d3d3 !important;
    padding: 0 16px !important;

    & > span {
      display: none;
    }
  }
}
</style>