如何使用Ant Design Vue 3（antdv）实现带用户输入的自定义下拉选择器

在自定义AntDV Select下拉面板时，添加输入框会遇到两个棘手问题：

• 不处理事件的话，点击输入框下拉面板会立即关闭
• 给容器加@mousedown="e => e.preventDefault()"，输入框又无法获取焦点，根本没法输入

核心解决思路 #

问题根源是Select下拉面板会监听mousedown事件，当事件冒泡到下拉容器时触发关闭逻辑。之前用preventDefault()会直接阻止输入框的聚焦行为，正确的做法是阻止事件向上冒泡，而非阻止默认行为。

修改后的完整代码 #

<template>
  <a-select
    v-model:value="value"
    style="width: 120px"
    :options="items.map((item) => ({ value: item }))"
  >
    <template #dropdownRender="{ menuNode: menu }">
      <v-nodes :vnodes="menu" />
      <a-divider style="margin: 4px 0" />
      <!-- 使用.stop修饰符阻止mousedown事件冒泡 -->
      <div style="padding: 4px 8px;" @mousedown.stop>
        <a-input
          placeholder="add name"
          @change="addItem"
          @keyup.enter="addItem"
        />
      </div>
    </template>
  </a-select>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
  },
  setup() {
    const items = ref(["jack", "lucy"]);
    const value = ref("lucy");

    const addItem = (e) => {
      const name = e.target.value.trim();
      // 去重后添加新选项，同时清空输入框
      if (name && !items.value.includes(name)) {
        items.value.push(name);
        e.target.value = "";
      }
    };
    return {
      items,
      value,
      addItem,
    };
  },
});
</script>

关键说明 #

1. 事件处理：给输入框的外层容器添加@mousedown.stop，利用Vue的事件修饰符.stop阻止事件向上冒泡到Select的下拉容器，这样既不会触发下拉关闭，也不影响输入框正常聚焦。
2. 输入逻辑优化：调整addItem方法，从事件对象中获取输入值，添加去重判断避免重复选项；同时增加回车触发逻辑，提升操作体验。

内容的提问来源于stack exchange，提问作者Etep