我尝试使用antdv创建一个自定义下拉菜单，但是文档（https：//www.antdv.com/components/select/#Custom-dropdown）上显示的示例并没有真正向我展示如何使用用户输入添加它。
我在这里创建了一个示例：https://codesandbox.io/s/custom-dropdown-ant-design-vue-3-2-14-forked-3zm0i7?file=/src/demo.vue），但是在输入值时却遇到了麻烦。如果我在div中使用@mousedown="e => e.preventDefault()"，那么我就无法访问a-input。如果我尝试不使用它，那么a-input在我输入任何内容之前就消失了。如果你不想点击链接，下面是代码：

<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" />
      <!-- <div
        style="padding: 4px 8px;"
        @mousedown="e => e.preventDefault()"
      > -->
      <a-input
        placeholder="add name"
        @mousedown="(e) => e.preventDefault()"
        @change="addItem"
      />
      <!-- </div> -->
    </template>
  </a-select>
</template>

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

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

    const addItem = (name) => {
      console.log("addItem");
      items.value.push(name);
    };
    return {
      items,
      value,
      addItem,
    };
  },
});
</script>