FE_huoran_client/src/layouts/navbar/index.vue

<template>
  <div>
    <el-menu :class="['nav', { home: isHome, estate: isEstate, changing: !showMenu }]" ref="elMenu" :key="menuRefresh"
      :mode="$store.getters.getModelType ? 'horizontal' : 'vertical'" :background-color="bgColor"
      :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump"
      :default-active="String(active)">
      <menuTree :menuList="menus" />
      <el-submenu :popper-class="$store.getters.getModelType ? 'iasf-menu-popup' : isHome ? 'home-menu-popup' : ''"
        v-show="showMoreBtns" index="522222">
        <template slot="title">
          <div class="moreBtns">{{ $t('column.more') }}</div>
        </template>
        <menuTree :menuList="otherMenus" />
      </el-submenu>
    </el-menu>

  </div>
</template>

<script>
import menuTree from '@/components/menuTree'
import mixins from '@/mixins/article'
import { mapMutations, mapGetters } from 'vuex'
import Setting from '@/setting'
export default {
  props: ['isHome', 'isEstate', 'isIasf'],
  mixins: [mixins],
  data () {
    return {
      active: this.$route.query.id,
      menus: [],
      bgColor: '#fff',
      textColor: '#333',
      activeTextColor: '#1583FF',
      menuRefresh: 1,
      showMenu: true,
      toItem: {},
      parentId: 0,
      otherMenus: [],
      // 当导航栏条目大于10条,则在pc端显示更多的按钮
      showMoreBtns: false
    };
  },
  components: {
    menuTree
  },
  computed: {
    ...mapGetters(["getNavSum"]),
    mapboxMap1 () {
      return this.navSum;
    },
  },
  watch: {
    '$route' () {
      const { siteId } = this.$route.query
      // siteId有变化，则重新获取栏目，并更改store
      if (siteId && siteId != this.site) {
        this.getColumn()
        this.setSite(siteId)
      }
      this.handleColor()
    },
    isHome () {
      this.handleColor()
    },
    getNavSum () {
      this.getColumn()
    }
  },
  mounted () {
    this.lastHome = this.isHome
    this.handleColor()
    this.getColumn()
  },
  methods: {
    ...mapMutations('content', [
      'setSite'
    ]),
    // 栏目列表
    getColumn () {
      this.$post(this.api.listWithTree, {
        siteId: this.site,
        columnName: '',
        templateId: '',
        typeId: '',
        isSort: 1
      }).then(({ data }) => {
        // 去掉被禁用的栏目
        const menuVisibleData = data.filter(item => item.menuVisible == 0)
        if (this.$store.getters.getModelType) {
          this.menus = menuVisibleData.slice(0, sessionStorage.getItem('navPageSize'))
          this.otherMenus = menuVisibleData.slice(sessionStorage.getItem('navPageSize'), data.length)
          if (this.otherMenus.length >= 1) {
            this.showMoreBtns = true
          } else {
            this.showMoreBtns = false
          }
        } else {
          this.showMoreBtns = false
          this.menus = menuVisibleData
        }
        if (data.length) {
          if (!this.$route.query.id && !this.$route.query.articleId && !Setting.whiteList.includes(this.$route.path)) this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
          if (!this.active) this.active = data[0].id
          this.$nextTick(() => {
            const menu = document.querySelectorAll('.el-submenu')
            for (let i = 0; i < menu.length; i++) {
              menu[i].onclick = e => {
                // 获取栏目id
                let id = e.target.getAttribute('id')
                if (!id) {
                  const span = e.target.querySelector('span')
                  if (span) id = span.getAttribute('id')
                }
                id && this.jump(id)
              }
            }
          })
        }
      }).catch(err => { })
    },
    // 改变菜单颜色
    handleColor () {
      const home = this.isHome
      if (this.lastHome !== home) this.showMenu = false
      this.bgColor = home ? 'transparent' : '#fff'
      if (this.$route.path !== '/home') this.textColor = home ? '#f9f9f9' : '#333'
      this.lastHome !== home && this.$nextTick(() => {
        setTimeout(() => {
          this.showMenu = true
        }, 200)
      })
      this.lastHome = home
      // this.menuRefresh++
    },
    // 获取点击菜单的路径
    getPath (data, id) {
      for (const e of data) {
        if (e.level === 1) this.parentId = e.id
        if (e.id == id) {
          this.toItem = e
          break
        } else {
          this.getPath(e.children, id)
        }
      }
    },
    // 跳转
    jump (id) {
      id = id || this.otherMenus[0].id
      this.active = id
      this.getPath(this.otherMenus, id)
      this.getPath(this.menus, id)
      this.columnTo(this.toItem)
      this.$emit('updateModelType', false)
    }
  }
};
</script>

<style lang="scss" scoped>
$height: 89px;

.moreBtns {
  font-size: 1rem;
  font-weight: bold;
  padding-top: 0.2rem;
}

.changing {
  opacity: 0;
}

/deep/.nav.el-menu--horizontal {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  outline: none;

  .el-menu-item,
  .el-submenu__title {
    height: $height;
    line-height: $height;

    span {
      font-size: 1rem;
      font-weight: 600;
      text-shadow: 0px 2px 1px rgba(185, 185, 185, .5);
    }

    &:hover {
      background-color: transparent !important;

      span {
        color: #499eff;
      }
    }
  }

  .el-submenu__title {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .menu-child {
    display: flex;
  }

  .el-submenu__icon-arrow {
    position: static;
    margin: 0 0 0 5px;
    color: inherit;
  }

  .is-active {
    color: #333 !important;
  }

  .active,
  .active .el-submenu__title {
    color: #1583ff !important;
  }

  &.home {

    .el-menu-item,
    .el-submenu__title {
      &:hover {
        background-color: transparent !important;

        span {
          color: #499eff;
        }
      }
    }

    .is-active {
      color: #f9f9f9 !important;
    }

    .active,
    .active .el-submenu__title {
      color: #1583ff !important;
    }
  }
}

@media (max-width: 1200px) {
  /deep/.nav {
    .el-menu-item {
      padding: 0 8px;
      color: black !important;
    }
  }
}
</style>