menduner/src/components/headSearch/index.vue

<template>
  <div class="search d-flex align-center">
    <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
      <template v-slot:activator="{ isActive, props }">
        <v-btn
          style="height: 100%; font-size: 16px;"
          variant="text"
          density="comfortable"
          :append-icon="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"
          color="primary"
          v-bind="props"
        >
          {{ defineProps.text }}
        </v-btn>
      </template>
      <jobTypeCard v-if="defineProps.text === '职位类型'" isBuryingPoint class="jobTypeCardBox" @handleJobClick="handleClickJob"></jobTypeCard>
    </v-menu>
    <!-- <div style="position: relative;">
      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
        <span>{{ text }}</span>
        <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
      </div>
      <jobTypeCard class="jobTypeCardBox" v-if="drawer" @click.stop=""></jobTypeCard>
    </div> -->
    <v-text-field
      v-model="value"
      placeholder="搜索职位/公司"
      color="primary"
      variant="plain"
      density="compact"
      :hide-details="true"
      class="ml-3 px-2"
      style="height: 100%; line-height: 100%;"
      @keyup.enter="handleSearch"
    ></v-text-field>
    <div class="searchBtn" @click="handleSearch">搜索</div>
  </div>
</template>

<script setup>
import { useSharedState } from '@/store/sharedState'
import jobTypeCard from '@/components/jobTypeCard'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
defineOptions({ name:'common-components-headSearch'})
const route = useRoute(); const router = useRouter()
const emits = defineEmits(['update:modelValue', 'handleSearch', 'handleJobClick'])// 定义一个或多个自定义事件
const defineProps = defineProps({
  modelValue: [String, Number],
  text: {
    type: String,
    default: '职位类型'
  },
})

// const value = ref('')
const value = ref(defineProps.modelValue)
let drawer = ref(false)

if (route.query && route.query?.content) value.value = route.query.content

// 点击外部关闭职位下拉
const sharedState = useSharedState()
// 监听 layoutClickCount 变化
watch(() => sharedState.layoutClickCount, () => {
  if (drawer.value) drawer.value = false
});

const handleSearch = () => {
  // 职位搜索页传参，其它的跳转到职位搜索页
  if (route.path !== '/recruit/position') {
    if (value.value) router.push(`/recruit/position?content=${value.value}`)
    else router.push('/recruit/position')
  } else emits('handleSearch', value.value)
}

const handleClickJob = (val) => {
  // 职位搜索页点击传参， 其它的跳转到职位搜索页
  if (route.path !== '/recruit/position') router.push(`/recruit/position?positionId=${val.id}`)
  else emits('handleJobClick', val)
}

</script>

<style lang="scss" scoped>
.search {
  height: 50px;
  width: 800px;
  margin: 0 auto;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  .jobBox {
    cursor: pointer;
    &:hover {
      color: var(--v-primary-base);
    }
    span {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .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);
    cursor: pointer;
  }
  .jobTypeCardBox {
    position: absolute;
    top: 42px;
    left: 0;
  }
}
</style>