pozhen_web_nuxt/components/Header/index.vue

<template>
  <div class="Header ">
    <div class="Header-container" :style="[HeaderStyleOption]">
      <HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
      <HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
      <HeaderSearch v-if="_lazy_with_fix_" :HeaderSearch="HeaderStyleOption.HeaderSearch"
        :appNav="HeaderStyleOption.appNav" :navList="navList" @showSearchBox="showSearchBox"></HeaderSearch>
    </div>
    <div class="search-box " @mouseleave="showSearchHideBox([])">
      <!-- @input="searchEvent" -->
      <input type="text" class="search-box-input " v-model='inputval'  @keydown="keyDownEvent">
      <nuxt-link @click="showSearchBox()" class="search-btn" :to="url + $('search-box-input')[0].value">搜索</nuxt-link>
      <div class="search-hide-box ">
        <div class="search-hide-items" v-for="item in searchRes">
          <nuxtLink :to="{ path: getHerf(item.href), query: { s: item.txt } }">
            {{ item.txt }}
          </nuxtLink>
        </div>
      </div>
    </div>
  </div>
  <div class="phone-box">

  </div>
</template>

<script setup>
import HeaderIcon from "./HeaderIcon.vue";
import HeaderNav from "./HeaderNav.vue";
import HeaderSearch from "./HeaderSearch.vue";

const $ = document ? document.getElementsByClassName.bind(document) : () => [{ value: '' }]
const _lazy_with_fix_ = ref(false)
setTimeout(() => _lazy_with_fix_.value = true)
const { t, locale } = useI18n()
const router = useRouter()
/**样式配置*/
const HeaderStyleOption = reactive({

  /**导航样式*/
  HeaderNav: {
    'padding-left': '25vw'
  },
  /**icon样式*/
  HeaderIcon: {},
  /**搜索样式*/
  HeaderSearch: {
    position: ' absolute',
    right: '20px',
  },
  /**手机菜单栏样式*/
  appNav: {
    top: ' 0',
    height: '100%',
    width: '100%'
  }
})
let inputval = ref('')
let info_article_type_id = ref(0)

// '/product'
// '/product/child'
// 'child'
let navList = ref([
  {
    name: t('common.header.home'),
    children: [],
    href: '/',
    alias: 'home'
  },
  {
    name: t('common.header.products'),
    // href: '/product/product_list/0-1',
    children: [],
    alias: 'products'
  },
  {
    name: t('common.header.about'),
    children: [],
    href: '/about',
    alias: 'about'
  },
  {
    name: t('common.header.news'),
    children: [],
    href: '/news/1-1',
    alias: 'news'
  },
  {
    name: t('common.header.contact'),
    children: [],
    href: '/contact',
    alias: 'contact'
  },


])

let searchRes = ref(null)

const showSearchBox = function () {
  document.getElementsByClassName('search-box')[0].classList.toggle('search-show')
  document.getElementsByClassName('search-box-input')[0].classList.toggle('search-input-show')
}
let timer = null

const showSearchHideBox = function (data) {
  searchRes.value = data
  if (data && data.length !== 0) {
    document.getElementsByClassName('search-box-input')[0].classList.add('search-have')
  } else {
    document.getElementsByClassName('search-box-input')[0].classList.remove('search-have')
  }
}

/**对接区域**/
const searchEvent = function (e) {
  return
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    let searchVal = e.target.value
    useFetch('/api/product/getProductList', {
      params: {
        "product_name": searchVal || ' ',
        locale: locale.value
      }
    }).then((res) => {
      let searchData = []
      for (let item of JSON.parse(res.data.value).data) {
        let obj = {}
        obj.href = '/product/product_list/' + item['product_id'] + '-1'
        obj.txt = item['product_name']
        searchData.push(obj)
      }

      showSearchHideBox(searchData)
    })

  }, 1000)
}
let url = getHerf('/product/product_list/0-1?s=')

const keyDownEvent = $event => {
  $event.keyCode === 13 && (router.push(url + $event.target.value))
  // console.log(123);
  $event.keyCode === 13 && showSearchBox()


}

useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
  let data = JSON.parse(res.data.value).data || []
  res = []
  for (let item of data) {
    let obj = {}
    obj.name = item.product_type_name
    obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
    res.push(obj)
  }
  /**新增全系列跳转**/
  res.unshift({
    href: '/product/product_list/0-1',
    name: t('home.products.all')
  })
  for (let key in navList.value) {
    if (navList.value[key].alias === 'products') {
      navList.value[key].children = res
    }
  }
})
</script>

<style lang="scss" scoped src="~/assets/css/Header/index.scss"></style>
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style>