aerwen_u_site/components/Header/HeaderSearch.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
              v-if="!isLogin"
              @click="showLoginBox()"
              class="HeaderSearch-Icon"
              :size="45"
              src="https://blender.kim/wp-content/themes/zibll/img/avatar-default.png"
            />
            <el-avatar
              e-else
              class="HeaderSearch-Icon"
              :size="45"
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132"
            />
            <template #dropdown>
              <el-dropdown-menu v-if="isLogin">
                <el-dropdown-item>
                  <nuxt-link :to="getHerf('/center')"> 个人中心 </nuxt-link>
                </el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu v-else>
                <el-dropdown-item @click="showLoginBox()">登录</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>

  <div class="overlay hidden">
    <div class="main">
      <input type="checkbox" id="chk" aria-hidden="true" />

      <div class="login">
        <div class="login_cancel">
          <button class="Btn" @click="hideLoginBox()">
            <div class="sign">
              <svg viewBox="0 0 512 512">
                <path
                  d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
                ></path>
              </svg>
            </div>

            <div class="text">取消</div>
          </button>
        </div>
        <form class="form">
          <label for="chk" aria-hidden="true">Log in</label>
          <input
            class="input"
            type="email"
            name="email"
            placeholder="Email"
            required=""
          />
          <input
            class="input"
            type="password"
            name="pswd"
            placeholder="Password"
            required=""
          />
          <button>Log in</button>
        </form>
      </div>

      <div class="register">
        <form class="form">
          <label for="chk" aria-hidden="true">Register</label>
          <input
            class="input"
            type="text"
            name="txt"
            placeholder="Username"
            required=""
          />
          <input
            class="input"
            type="email"
            name="email"
            placeholder="Email"
            required=""
          />
          <input
            class="input"
            type="password"
            name="pswd"
            placeholder="Password"
            required=""
          />
          <button>Register</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
const appNavShow = ref(false);
const log = console.log;
const isLogin = ref(false);
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");
};

const showLoginBox = function () {
  document.getElementsByClassName("overlay")[0].style.opacity = 1;
  document.getElementsByClassName("overlay")[0].style['z-index'] = 999999999;
  document.getElementsByClassName("overlay")[0].classList.toggle('hidden');
};
const hideLoginBox = function () {
  document.getElementsByClassName("overlay")[0].style.opacity = 0;
  document.getElementsByClassName("overlay")[0].style['z-index'] = -99999;
  document.getElementsByClassName("overlay")[0].classList.toggle('hidden');
  
};
</script>

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