53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<template>
|
|
<div class="HeaderNav" :style="[props.HeaderNav]">
|
|
<div class="HeaderNav-container">
|
|
|
|
<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" class="font">{{ item.name }}</span>
|
|
<div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
|
|
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 f1" @mouseenter="enterNavEnter">
|
|
{{ _item.name }}
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
HeaderNav: Object,
|
|
navList: Array
|
|
})
|
|
const route = useRouter()
|
|
const currentRoute = route.currentRoute.value.matched[0]['name']
|
|
|
|
//事件
|
|
let navTimer = null
|
|
const enterNavEnter = e => {
|
|
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
|
|
ele &&
|
|
ele.classList.remove('dNone')
|
|
clearInterval(navTimer)
|
|
navTimer = setTimeout(() => {
|
|
ele &&
|
|
ele.classList.add('dNone')
|
|
}, 1000)
|
|
}
|
|
const enterNavLeave = e => {
|
|
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[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> |