generated from nuxt/nuxt_site
64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
|
<div class="HeaderSearch" :style="[props.HeaderSearch]">
|
|
<div class="HeaderSearch-container">
|
|
<div class="HeaderSearch-box">
|
|
<img src="/img/icon/searchIcon.png" @click="showSearchBox" class="HeaderSearch-Icon" alt="">
|
|
<div class="HeaderSearch-button" @click="toggleAppNavShow">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow" :style="props.appNav" @click="closeAppNavShow($event)">
|
|
<div class="app-box" @click="closeAppNavShow($event)">
|
|
<nuxt-link :to="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name" @click="appNavItemEvent(item,$event.target)">
|
|
<div @click="appNavItemEvent(item,$event.target.parentElement)" >{{item.name}}</div>
|
|
<nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone" v-for="_item in item.children" :key="_item.name" >
|
|
<div >{{_item.name}}</div>
|
|
</nuxt-link>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const appNavShow = ref(false)
|
|
const log = console.log
|
|
const props = defineProps({
|
|
HeaderSearch:Object,
|
|
appNav:Object,
|
|
navList:Array
|
|
})
|
|
|
|
const emit = defineEmits(['showSearchBox'])
|
|
const appNavItemEvent = function (item,e){
|
|
if(item.children.length!==0){
|
|
let tag = e
|
|
tag.classList.toggle('active');
|
|
[...tag.children].filter(item=>item.nodeName==='A').map(item=>{
|
|
item.classList.toggle('dNone')
|
|
})
|
|
}
|
|
}
|
|
|
|
const toggleAppNavShow = function (){
|
|
appNavShow.value = !appNavShow.value
|
|
}
|
|
const closeAppNavShow = function (e){
|
|
let tag = e.target
|
|
if(tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className==='app-box'){
|
|
appNavShow.value = false
|
|
document.body.style.overflowY = 'auto'
|
|
}
|
|
}
|
|
const showSearchBox = function (){
|
|
emit('showSearchBox')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/Header/search.scss" lang="scss"></style>
|
|
<style scoped src="~/assets/css/Header/media.scss" lang="scss"></style>
|