Vue3搜索search+下拉选择select的输入框【モモト】

一个输入框，可以输入进行搜索，输入框可以清空，聚焦输入框时上次搜索结果自动清空变为placeholder。

<template>
    <el-popover
      :visible="visible"
      placement="bottom-start"
      :show-arrow="false"
      :teleported="false"
      width="calc(100vw - 288px)"
    >
      <template #reference>
        <div>
          <el-input
            ref="InputRef"
            v-model="search"
            class="country-select"
            filterable
            :placeholder="current"
            :style="inputStyle"
            @focus="focusInput"
            @blur="blurInput"
          >
            <template #append>
              <IconArrowDown
                :class="{ 'arrow-icon': true, 'is-reverse': visible }"
                @click="onBtnClick"
              />
            </template>
          </el-input>
        </div>
      </template>
      <div>
        <SelectEmpty
          v-if="loading || error || (!loading && !countries.length)"
          :loading="loading"
          title="モモ"
          :error="error"
          @retry="request"
        />
        <div
          v-else
          v-show="visible"
          :tabindex="-1"
          @focusin="onFocus"
          @focusout="onBlur"
          @mouseover="() => (hover = true)"
          @mouseleave="() => (hover = false)"
        >
          <SearchList
            v-if="isValue(search)"
            :list="list"
            :input="search"
            @setItem="onSelect"
          />
          <SelectGroup
            v-else
            :continents="continents"
            @setItem="onSelect"
          />
        </div>
      </div>
    </el-popover>
</template>
<script setup lang="ts">
  import SearchList from './SearchList.vue'
  import SelectGroup from './SelectGroup.vue'
  import { isValue } from '@/utils/validotar'

  const props = defineProps<{
    modelValue: any
    placeholder?: string
    inputStyle?: any
  }>()

  let search = $ref(props.modelValue?.value)
  let inputting = $ref(false)
  let focus = $ref(false)
  let hover = $ref(false)

  const visible = computed(() => inputting || focus)

  const current = computed(() => props.modelValue?.title || '')

  const InputRef = ref<any>()

  watch([visible, current], () => {
    search = visible.value ? '' : current.value
    if (search === '请选择(必选)') {
      search = ''
    }
  })

  const onBtnClick = () => {
    if (visible.value === false) {
      unref(InputRef).focus()
    }
    inputting = !visible.value
  }

  const focusInput = () => {
    inputting = true
  }

  const blurInput = () => {
    setTimeout(() => {
      inputting = false
    }, 100)
  }

  const onFocus = () => {
    focus = true
  }

  const onBlur = () => {
    if (!hover) {
      setTimeout(() => {
        focus = false
      }, 100)
    }
  }
</script>