vue3组件封装之el-select搜索组件的封装，里面有下拉框

Vue3 中组件的封装相比 Vue2 有了很大的改进，可以使用 Composition API 来进行组件的编写，下面是一个使用 Vue3 Composition API 封装的带有搜索功能的 el-select 组件的示例：

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    :remote-method="search"
    :loading="isLoading"
    :loading-text="loadingText"
    :no-match-text="noMatchText"
    :popper-append-to-body="false"
    :popover-class="popoverClass"
    :debounce="debounce"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'ElSelectSearch',

  props: {
    // 下拉选项列表，格式为 [{ label: '选项1', value: 'value1' }, ...]
    options: {
      type: Array,
      default: () => []
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示搜索框
    filterable: {
      type: Boolean,
      default: true
    },
    // 下拉框的 class
    popoverClass: {
      type: String,
      default: ''
    },
    // 搜索框 placeholder
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    // 输入搜索内容后，触发搜索的延迟时间
    debounce: {
      type: Number,
      default: 300
    },
    // 搜索中的 loading 文本
    loadingText: {
      type: String,
      default: '加载中...'
    },
    // 没有匹配项的文本
    noMatchText: {
      type: String,
      default: '没有匹配的数据'
    },
    // 是否正在加载中
    isLoading: {
      type: Boolean,
      default: false
    }
  },

  setup(props, { emit }) {
    const state = reactive({
      selectedValue: '',
      searchValue: '',
      searchTimer: null
    })

    // 监听选中的值变化
    const handleSelectChange = (value) => {
      state.selectedValue = value
      emit('change', value)
    }

    // 监听搜索框输入的值变化
    const handleSearchValueChange = (value) => {
      state.searchValue = value

      if (state.searchTimer) {
        clearTimeout(state.searchTimer)
      }

      state.searchTimer = setTimeout(() => {
        emit('search', value)
      }, props.debounce)
    }

    // 执行搜索的方法
    const search = (query) => {
      emit('search', query)
    }

    // 将响应式数据转化为 ref
    const refs = toRefs(state)

    return {
      ...refs,
      handleSelectChange,
      handleSearchValueChange,
      search
    }
  }
}
</script>

这里我们使用了 `reactive` 和 `toRefs` 来创建响应式数据，并将其转化为 ref，方便在模板中使用。同时，我们也使用了 Vue3 的两个新的钩子函数 `setup` 和 `emit`。其中，`setup` 钩子函数用来替代 Vue2 中的 `beforeCreate` 和 `created` 钩子函数，用于组件的初始化和响应式数据的创建。`emit` 函数用于向父组件派发事件。在 `setup` 函数中，我们将响应式数据和方法都返回给模板使用。

该组件支持以下 props：

- `options`：下拉选项列表，格式为 `[{ label: '选项1', value: 'value1' }, ...]`。
- `clearable`：是否可清空。
- `disabled`：是否禁用。
- `filterable`：是否显示搜索框。
- `popoverClass`：下拉框的 class。
- `placeholder`：搜索框 placeholder。
- `debounce`：输入搜索内容后，触发搜索的延迟时间。
- `loadingText`：搜索中的 loading 文本。
- `noMatchText`：没有匹配项的文本。
- `isLoading`：是否正在加载中。

该组件支持以下事件：

- `change`：选中的值变化时触发。
- `search`：搜索框输入内容变化或者点击下拉框时触发。

该组件中的搜索功能使用了 ElementUI 的远程搜索，可以在 `search` 方法中进行异步搜索。需要注意的是，在使用远程搜索时，需要设置 `remote` 和 `:remote-method` 属性。`remote` 表示是否使用远程搜索，`:remote-method` 表示远程搜索的方法。

同时，我们也使用了 ElementUI 的 `el-option` 组件来显示下拉选项列表，使用 `v-for` 来遍历 `options` 数组中的每一个元素，并将其显示在下拉选项列表中。`el-select` 组件的 `v-model` 双向绑定 `selectedValue` 变量，当选中的值发生变化时，会触发 `handleSelectChange` 方法。

最后，我们将响应式数据和方法都返回给模板使用，模板中可以直接使用它们来进行渲染和交互。