menduner/src/components/headSearch/index.vue

<template>
  <div class="d-flex align-center" :style="{'margin': '0 auto', 'width': tipsText ? '963px': '800px'}">
    <span v-if="tipsText" class="color-666 mr-3">{{ tipsText }}</span>
    <div class="search d-flex align-center">
      <v-menu v-if="defineProps.text" :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="defineProps.placeholder"
        color="primary"
        variant="plain"
        density="compact"
        :hide-details="true"
        clearable
        class="ml-3 px-2"
        style="height: 100%; line-height: 100%;"
        @click:clear="handleSearch"
        @keyup.enter="handleSearch"
      ></v-text-field>
      <v-hover v-slot="{ isHovering, props }">
        <v-btn v-bind="props" v-ripple.center class="searchBtn" @click="handleSearch" :class="isHovering ? 'elevation-10' : 'elevation-5'">搜索</v-btn>
      </v-hover>
    </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],
  placeholder: {
    type: String,
    default: '搜索职位/公司关键字'
  },
  text: {
    type: String,
    default: ''
  },
  tipsText: {
    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.includes('%') ? decodeURIComponent(route.query.content) : route.query.content

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

const handleSearch = () => {
  const name = value.value ? value.value.includes('&') ? encodeURIComponent(value.value) : value.value : ''
  emits('handleSearch', name)
}

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

</script>

<style lang="scss" scoped>
.search {
  height: 50px;
  width: 800px;
  border-top: 2px solid var(--v-primary-base);
  border-left: 2px solid var(--v-primary-base);
  border-bottom: 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: 180px;
    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>