Vue3 - Arco Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“，既能下拉框选择又可以像 input 一样输入文字内容，让Select选择器组件能选也能输入文字

Arco Design Vue 的 a-select 组件支持自定义输入，可以通过设置 allow-input 属性来启用手动输入。以下是一个简单的例子，展示如何使用 a-select 实现同时支持下拉选择和手动输入的功能：

<template>
  <a-space direction="vertical" size="large">
    <a-select
      v-model="selectedValue"
      :options="options"
      placeholder="请选择或输入"
      allow-input
      @input-value-change="handleInputValueChange"
    />
    <div>选中的值：{{ selectedValue }}</div>
  </a-space>
</template>
 
<script setup>
import { ref } from 'vue';
 
const selectedValue = ref(null);
const options = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
  { label: '选项3', value: 'option3' },
];
 
const handleInputValueChange = (value) => {
  console.log('手动输入的值：', value);
};
</script>

在这个例子中，a-select 组件通过 v-model 绑定了 selectedValue 来获取或设置选中的值。options 数组定义了下拉菜单的选项。开启了 allow-input 属性允许用户手动输入。每次输入值变化时，handleInputValueChange 方法会被触发，并输出当前手动输入的值。