【无标题】

vue3中使用antd 4.0 select组件可选择也可输入可搜索

<template>
	<Select
	     v-model:value="changeReason"
	     :search-value="searchReason"
	     :options="reasonList"
	     :show-search="true"
	     :filter-option="filterOptions"
	     @input-key-down="keyDownFn"
	     @search="searchReasonFn"
	     @change="changeReasonFn"
	 />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const changeReason = ref();
  const searchReason = ref();
  const reasonList = [
 	{label: '喜喜', value: 'xixi' },
 	{label: '哈哈', value: 'haha'}
  ]

  // 搜索选项中是否存在输入的内容
  const filterOptions = (v, o) => {
    return o.value.indexOf(v) >= 0;
  };
  
  let canClear = false;
  // 原Select输入内容时，search事件会清楚输入的内容，所以设置是否可以清楚输入内容canClear，如果输入内容长度为1且按键是Backspace/Delete则可以清除输入的内容，否则不可以删除
  function keyDownFn(e) {
    canClear = false;
    if (e.target.value.length == 1 && e.key == 'Backspace') {
      canClear = true;
    }
    if (e.target.value.length == 1 && e.key == 'Delete') {
      canClear = true;
    }
  }
  
  // 输入内容时会触发search事件
  function searchReasonFn(v) {
  	// 在blur的时候输入的数据会被清除，所以看canClear是否可以清除输入值
    if (!v) {
      searchReason.value = canClear ? v : searchReason.value;
      changeReason.value = canClear ? v : changeReason.value;
      return;
    }
    // 如果输入的数据选项中有，就直接赋值给changeReason和searchReason
    let data = reasonList.value?.find((i) => i.label == v);
    changeReason.value = data ? data.label : undefined;
    searchReason.value = v;
  }
  
  // change事件触发的时候把searchReason删除掉，如果不删除select只能显示输入的值
  function changeReasonFn() {
    searchReason.value = undefined;
  }
</script>