generated from nuxt/nuxt_site
80 lines
2.7 KiB
Vue
80 lines
2.7 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>
|
|
<el-dropdown>
|
|
<el-avatar class="HeaderSearch-Icon" :size="45"
|
|
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<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>
|