zhbsq-vue-web/src/components/TopNav/index.vue

<template>
  <el-popover :default-active="activeMenu" placement="bottom" width="400" trigger="click" style="margin-top: 44px" v-model="isShowMenu">
    <div class="cbox">
      <div class="lable">菜单入口</div>
      <div class="menu" v-for="(item, index) in topMenus" @click="handleSelect(item)">
        <div class="out">
          <div class="int">
            <div class="icon"><svg-icon :icon-class="item.meta.icon" /></div>
            <div class="desc">{{ item.meta.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div slot="reference" class="reference" >
      <span class="icon">&#xe608;</span>
      <div class="mtt">应用中心</div>
    </div>
  </el-popover>
</template>

<script>
import { constantRoutes } from '@/router';

// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile'];

export default {
  data() {
    return {
      isShowMenu: false,
      // 当前激活菜单的 index
      currentIndex: undefined
    };
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      this.routers.map(menu => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === '/') {
            topMenus.push(menu.children[0]);
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = [];
      this.routers.map(router => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === '/') {
              router.children[item].path = '/' + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path = router.path + '/' + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return constantRoutes.concat(childrenMenus);
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path;
      let activePath = path;
      if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
        const tmpPath = path.substring(1, path.length);
        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
        this.$store.dispatch('app/toggleSideBarHide', false);
      } else if (!this.$route.children) {
        activePath = path;
        this.$store.dispatch('app/toggleSideBarHide', true);
      }
      this.activeRoutes(activePath);
      return activePath;
    }
  },
  beforeMount() {
    window.addEventListener('resize', this.setVisibleNumber);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setVisibleNumber);
  },
  mounted() {
    this.setVisibleNumber();
  },
  methods: {
    closeMenuHandler() {
      this.$emit('closeMenuHandler');
    },

    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3;
      this.visibleNumber = parseInt(width / 85);
    },
    // 菜单选择事件
    handleSelect(item) {
      this.isShowMenu = false;
      this.currentIndex = item.path;
      let key = item.path;
      const route = this.routers.find(item => item.path === key);
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, '_blank');
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        this.$router.push({ path: key });
        this.$store.dispatch('app/toggleSideBarHide', true);
      } else {
        // 显示左侧联动菜单
        this.activeRoutes(key);
        this.$store.dispatch('app/toggleSideBarHide', false);
      }
      this.$emit('showHamBurger');
      this.$emit('closeMenuHandler');
    },
    // 当前激活的路由
    activeRoutes(key) {
      var routes = [];
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map(item => {
          if (key == item.parentPath || (key == 'index' && '' == item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        this.$store.commit('SET_SIDEBAR_ROUTERS', routes);
      }
    },
    ishttp(url) {
      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
    }
  }
};
</script>

<style lang="scss">
.testgks {
  margin-left: 12vw;
}
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #{'var(--theme)'} !important;
  color: #303133;
}

/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}
.reference {
  margin-top: -2px;
  .mtt {
    margin-top: -24px;
    font-size: 14px;
  }
}
.el-popper {
  top: 44px !important;
}
.menu {
  float: left;
  width: 33.33%;
  .out {
    padding: 10px;
    .int {
      padding: 10px 10px 0px 10px;
      text-align: center;
      cursor: pointer;
      .icon {
        width: 45px;
        height: 45px;
        color: white;
        border-radius: 12px;
        margin: 0 auto;
        font-size: 23px;
        line-height: 45px;
        background-color: rgb(37, 97, 239);
        color: white;
      }
      .desc {
        color: #545555;
        margin-top: 9px;
        font-size: 14px;
      }
    }
  }
}
</style>