antdesign的下拉框

Question

vue3 使用antdesign的下拉框，如何既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）

<template>
  <div>{{ value1 }}</div>
  <h2>use a-select-option</h2>
  <a-space>
    <a-select ref="select" v-model:value="value1" style="width: 120px" :show-search="true" @focus="focus"
      @change="handleChange" placeholder="请输入或者选择">
      <a-select-option :value="item" v-for="(item, index) in data">{{ item }}</a-select-option>
    </a-select>
  </a-space>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const data = ['Jack', 'Lucy', 'Disabled', 'yiminghe'];
    const value1=ref(null);
    const focus = () => {
      console.log('focus');
    };
    const handleChange = value => {
      console.log(`selected ${value}`);
    };
    return {
      focus,
      handleChange,
      value1,
      data,
    };
  },
});
</script>

Answer 1

需要对输入框事件进行处理，oninput记录输入值，onblur时设置model的值。示例如下

<template>
  <div>{{ value1 }}</div>
  <h2>use a-select-option</h2>
  <a-space>
    <a-select ref="select" v-model:value="value1" style="width: 120px" :show-search="true" @focus="focus"
      @change="handleChange" placeholder="请输入或者选择">
      <a-select-option :value="item" v-for="(item, index) in data">{{ item }}</a-select-option>
    </a-select>
  </a-space>
</template>
<style>
.ant-select-dropdown-empty,.ant-select-item-empty{display:none!important}
</style>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const data = ['Jack', 'Lucy', 'Disabled', 'yiminghe'];
    const value1=ref(null);
    let init=false;
    let inputValue=ref(null);
    const focus = (e) => {
      if(!init){
        e.target.oninput=function(){
          inputValue.value=this.value
        };
        e.target.onblur=function(){
          value1.value=inputValue.value
        };
        init=true;
      }
    };
    const handleChange = value => {
      inputValue.value=value
    };
    return {
      focus,
      handleChange,
      value1,
      data,
    };
  },
});
</script>