menduner/src/views/Home/personal/components/search.vue

<template>
  <div class="search d-flex align-center">
    <div style="position: relative;">
      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
        <span>职位类型</span>
        <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
      </div>
      <jobTypeCard class="jobTypeCardBox" v-if="drawer" float @click.stop=""></jobTypeCard>
    </div>
    <v-text-field
      v-model="value"
      placeholder="搜索职位/公司"
      color="primary"
      variant="plain"
      density="compact"
      :hide-details="true"
      class="px-2"
      style="height: 100%; line-height: 100%;"
    ></v-text-field>
    <div class="searchBtn">搜索</div>
  </div>
</template>

<script setup>
import { useSharedState } from '@/store/sharedState'
import jobTypeCard from './jobTypeCard.vue'

import { ref, watch } from 'vue';

defineOptions({ name:'personal-search'})

const value = ref('')
let drawer = ref(false)

// 点击外部关闭职位下拉
const sharedState = useSharedState()

// 监听 layoutClickCount 变化
watch(() => sharedState.layoutClickCount, () => {
  // console.log('layoutClickCount', newValue)
  if (drawer.value) drawer.value = false
});

</script>

<style lang="scss" scoped>
.search {
  height: 50px;
  width: 800px;
  margin: 20px auto;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .jobBox {
    cursor: pointer;
    &:hover {
      color: var(--v-primary-base);
    }
  }
  .drawer {
    color: var(--v-primary-base);
  }
  .searchBtn {
    width: 100px;
    height: 50px; line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
  }
  .jobTypeCardBox {
    position: absolute;
    top: 42px;
    left: 0;
  }
}
</style>