generated from nuxt/nuxt_site
97 lines
3.5 KiB
Vue
97 lines
3.5 KiB
Vue
<template>
|
|
<div class="HeaderNav" :style="[props.HeaderNav]">
|
|
<div class="HeaderNav-container">
|
|
|
|
<!-- <el-menu class="HeaderNav-box" mode="horizontal" @select="handleSelect" :ellipsis="false"
|
|
active-text-color="black" active-color="black" text-color="black" :popper-offset="-16">
|
|
<el-menu-item v-for="(item, index) in props.navList" :key="item.name" :index="item.name"
|
|
class="HeaderNav-navItems">
|
|
<nuxt-link v-if="item.children.length === 0" :to="getHref(item.href)" class="font">{{ item.name }}</nuxt-link>
|
|
</el-menu-item>
|
|
<el-sub-menu v-for="(item, index) in props.navList" :key="item.name" :index="item.name">
|
|
<template #title>
|
|
<div class="HeaderNav-navItems">{{ item.name }}</div>
|
|
</template>
|
|
<el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name" class="HeaderNav-navItems">
|
|
{{ _item.name }}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu> -->
|
|
|
|
|
|
|
|
<nuxt-link :to="getHerf(item.href)"
|
|
:class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
|
|
v-for="item in props.navList" v-cloak :key="item.name">
|
|
<span v-if="item.children.length === 0" class="font">{{ item.name }}</span>
|
|
<span v-else @mouseenter.self="enterNavEnter($event, 'HeaderNav-navItems-child-box')" class="font">{{ item.name
|
|
}}</span>
|
|
<div class="HeaderNav-navItems-child-box dNone"
|
|
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box')" v-if="item.children.length >= 1">
|
|
<div v-for="_item in item.children" class="HeaderNav-navItems-child-items">
|
|
<nuxt-link :to="getHerf(_item['href'])" class="font"
|
|
@mouseenter="enterNavEnter($event, 'HeaderNav-navItems-child-box-child-box', true)">
|
|
{{ _item.name + (_item.children?.length >= 1 ? ' >' : '') }}
|
|
|
|
|
|
</nuxt-link>
|
|
<!-- 第二层 -->
|
|
<template v-if="_item.children">
|
|
|
|
<div class="HeaderNav-navItems-child-box-child-box dNone"
|
|
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box-child-box')">
|
|
<div v-for="_itemchild in _item.children" class="HeaderNav-navItems-child-items">
|
|
<nuxt-link :to="getHerf(_itemchild['href'])" class="font ">
|
|
{{ _itemchild.name }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const activeIndex = ref('1')
|
|
const handleSelect = (key, keyPath) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
|
|
const props = defineProps({
|
|
HeaderNav: Object,
|
|
navList: Array
|
|
})
|
|
const route = useRouter()
|
|
const currentRoute = route.currentRoute.value.matched[0]['name']
|
|
|
|
//事件
|
|
let navTimer = null
|
|
const enterNavEnter = (e, cn, fade) => {
|
|
|
|
;[...document.getElementsByClassName(cn)].map(item => item.classList.add('dNone'))
|
|
|
|
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
|
|
ele &&
|
|
ele.classList.remove('dNone')
|
|
clearInterval(navTimer)
|
|
!fade && (navTimer = setTimeout(() => {
|
|
ele &&
|
|
ele.classList.add('dNone')
|
|
}, 1000))
|
|
}
|
|
const enterNavLeave = (e, cn) => {
|
|
console.log(cn, 123);
|
|
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
|
|
ele &&
|
|
ele.classList.add('dNone')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/Header/nav.scss" lang="scss"></style>
|
|
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style> |