I'm trying to implement a customized dropdown using antdv, but the example provided in the documentation () doesn't cover how to do it based on user input.
Here's my attempt: https://codesandbox.io/s/custom-dropdown-ant-design-vue-3-2-14-forked-3zm0i7?file=/src/demo.vue. However, I am facing difficulties when trying to input a value. If I use
@mousedown="e => e.preventDefault()"a-input. On the other hand, if I remove it, the a-input disappears before I can type anything. In case you're unable to visit the link, here is the code snippet:
<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>