53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<nav>
|
|
<ul>
|
|
<template v-for="(nav, i) in menuData">
|
|
<li
|
|
@mouseover="OpenMenu(i, 'd')"
|
|
@mouseleave="CloseMenu"
|
|
v-if="nav.show === undefined || nav.show">
|
|
<nav-item :itemData="nav" @click="OpenMenu(i, 'm')" />
|
|
<template
|
|
v-if="nav.sub !== undefined && (nav.showsub === undefined || nav.showsub)">
|
|
<nav
|
|
class="menu-sub menu-side-sub menu-sub-left"
|
|
v-if="openedSub === i"
|
|
@click="OpenMenu(i, 'm')">
|
|
<ul>
|
|
<template v-for="(sub, j) in nav.sub">
|
|
<li v-if="sub.show === undefined || sub.show">
|
|
<nav-item :itemData="sub" />
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import NavItem from '@/components/NavItem.vue'
|
|
|
|
interface NavObj {
|
|
[key: string]: any
|
|
sub?: Record<string, any>
|
|
}
|
|
|
|
const props = defineProps<{
|
|
menuData: NavObj[]
|
|
}>()
|
|
|
|
const openedSub = ref<number | null>(null)
|
|
|
|
const OpenMenu = (i: number, d: string) => {
|
|
if (d === 'd' && document.body.offsetWidth >= 992) openedSub.value = i
|
|
if (d === 'm' && document.body.offsetWidth < 992) openedSub.value = i
|
|
}
|
|
const CloseMenu = () => {
|
|
openedSub.value = -1
|
|
}
|
|
</script>
|