4dkankan_official/src/page/layout/header/index.vue

<template>
  <div class="header-layout">
    <div class="logo-layout">
      <router-link :to="{name: 'home'}" class="logo">
        <vcenter>
          <img src="@/assets/images/logo.png" alt="">
        </vcenter>
      </router-link>
    </div>
    <div class="menu">
      <div class="lang">
        <vcenter>
          <a :class="{active: language === 'en'}" @click="$store.commit('change_language', 'en')">En</a>
          <a :class="{active: language === 'cn'}" @click="$store.commit('change_language', 'cn')">Cn</a>
        </vcenter>
      </div>
      <div class="list" ref="list" @mouseleave="hoverCp !== 'isearch' && hideCp()">
        <a
          v-for="nav in navs"
          :key="nav.text"
          @mouseenter="hoverCp !== 'isearch' && showCp(nav.cp, 135)"
          @click="clickHandle(nav)"
          :class="{active: hoverCp === nav.cp}">
          {{nav.text}}
        </a>

        <div class="child-layout" :style="{maxHeight: height + 'px'}" ref="navLayout">
          <i class="silp" :style="{left: split + 'px'}"></i>
          <slot :cp="hoverCp" />
        </div>

      </div>
    </div>
    <div class="ctrl">
      <a class="search" @click="searchHandle" :class="{active: hoverCp === 'isearch'}">
        <vcenter>
          <i class="iconfont icon-sousuo open"></i>
          <i class="iconfont icon-cuowu hide"></i>
        </vcenter>
      </a>
      <a class="user">
        <vcenter>
          <i class="iconfont icon-geren"></i>
          <span>登入</span>
        </vcenter>
      </a>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import vcenter from '@/components/vcenter'
import { getPosition } from '@/util'

export default {
  data () {
    return {
      height: 0,
      hoverCp: 'product',
      overb: false,
      active: true,
      navs: [
        {text: '产品购买', cp: 'product'},
        {text: '核心技术', cp: 'technology'},
        {text: '行业应用', cp: 'case'},
        {text: '服务支持', cp: 'service'},
        {text: '关于我们', cp: 'about'}
      ]
    }
  },
  methods: {
    clickHandle (nav) {
      this.$router.push({name: nav.cp})
    },
    showCp (cp, height) {
      clearTimeout(this.timeout)
      this.$bus.$emit('showMask')
      this.hoverCp = cp
      this.height = height
    },
    hideCp () {
      clearTimeout(this.timeout)
      this.$bus.$emit('hideMask')
      this.height = 0
      this.timeout = setTimeout(() => {
        this.hoverCp = null
      }, 700)
    },
    searchHandle () {
      if (this.hoverCp === 'isearch') {
        this.hideCp()
      } else {
        this.showCp('isearch', window.innerHeight - 68)
      }
    }

  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      split: state => state.ui.navDivision
    })
  },
  mounted () {
    this.sizeHandle = () => {
      this.$store.commit('change_nav_division', getPosition(this.$refs.list).x)
    }
    window.addEventListener('resize', this.sizeHandle)
    setTimeout(this.sizeHandle, 300)
  },
  destroyed () {
    window.removeEventListener('resize', this.sizeHandle)
  },
  components: {vcenter}
}
</script>

<style lang="scss" scoped>
@import './istyle.scss';
</style>