kh-device-client/src/components/menu/FirstLevelMenu.vue

<template>
  <!--  一级菜单    -->
  <div class="nav-menu">
    <ul class="nav-menu-list nav-menu-list-left">
      <li v-for="menu in showMenu.slice(0, 6)"
          :key="menu.id"
          @click="selectMenu(menu)"
          :class="{ active: openKeys.includes(menu.path)}">
        <div class="menu-item">
          <img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
               :src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
        </div>
        <div class="menu-item-title">{{menu.meta.title}}</div>
      </li>
    </ul>
    <ul class="nav-menu-list nav-menu-list-right">
      <li v-for="menu in showMenu.slice(6, 12)"
          :key="menu.id"
          @click="selectMenu(menu)"
          :class="{ active: openKeys.includes(menu.path)}">
        <div class="menu-item">
          <img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
               :src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
        </div>
        <div class="menu-item-title">{{menu.meta.title}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FirstLevelMenu',
  props: {
    menu: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      // 选择的path
      selectPath: '',
      openKeys: [],
      selectedKeys: []
    }
  },
  computed: {
    // 可以显示的一级菜单
    showMenu () {
      return this.menu.filter((item) => {
        if (item.hidden) {
          return false
        }
        return true
      })
    }
  },
  watch: {
    $route () {
      this.updateMenu()
      this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
    }
  },
  mounted () {
    this.updateMenu()
    this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
  },
  methods: {
    // 选择菜单
    selectMenu (menu) {
      this.selectPath = menu.path
      if (menu.children && menu.children.length > 0) {
        this.$router.push({ path: menu.children[0].path })
      } else {
        this.$router.push({ name: menu.name })
      }
      this.$emit('select', menu)
    },
    updateMenu () {
      const routes = this.$route.matched.concat()
      const { hidden } = this.$route.meta
      if (routes.length >= 3 && hidden) {
        routes.pop()
        this.selectedKeys = [routes[routes.length - 1].path]
      } else {
        this.selectedKeys = [routes.pop().path]
      }
      let openKeys = []
      routes.forEach(item => {
        openKeys.push(item.path)
      })

      // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
      // 包含冒号的是动态菜单
      if (this.selectedKeys[0].includes(':')) {
        const selectedKey = this.$route.fullPath
        this.selectedKeys = [selectedKey]
        const newOpenKeys = []
        this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
        if (newOpenKeys.length > 0) {
          openKeys = newOpenKeys.reverse()
        }
      }
      // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题

      // update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
      if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
      }
      // update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
    },
    fullOpenKeys (menus, selectedKey, openKeys) {
      for (const item of menus) {
        if (item.path === selectedKey) {
          openKeys.push(item.path)
          this.$emit('updateMenuTitle', item)
          return true
        } else if (Array.isArray(item.children)) {
          if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
            openKeys.push(item.path)
            return true
          }
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
//  一级导航样式
.nav-menu {
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 12px 0;

  .nav-menu-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      cursor: pointer;
      box-sizing: border-box;
      margin: 0 20px;
      max-width: 68px;

      .menu-item {
        position: relative;
        width: 68px;
        height: 68px;
        background-image: url("~@/assets/images/menu/top-menu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        font-size: 0;

        img {
          width: 28px;
          height: 28px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .menu-item-title {
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
        font-weight: bold;
        font-size: 16px;
        color: rgba(255,255,255,0.96);
        line-height: 19px;
        text-shadow: 0 4px 4px rgba(0,0,0,0.25);
        font-style: normal;
        text-transform: none;
        transform: translateY(-10px);
      }

      // 选中的样式
      &.active {

        .menu-item {
          background-image: url("~@/assets/images/menu/top-menu-act.png");
        }
        .menu-item-title {
          font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
          font-weight: bold;
          font-size: 16px;
          color: #FFC97A;
          line-height: 19px;
          text-shadow: 0 4px 4px rgba(0,0,0,0.25);
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}
</style>