实现如图效果
期望:点击输入框可以正常输入 下拉框不会收起,选择option时下拉框可以正常收起。
思路:通过open控制select的收放。
<template>
<div @mousedown="e => {
e.preventDefault()
this.selectOpen = true
}">
<a-select default-value="lucy" style="width: 300px" :open="selectOpen" @select="handleSelect">
<div slot="dropdownRender" slot-scope="menu">
<div style="padding: 4px 8px; cursor: pointer;display: flex">
<a-input @click="e=>e.target.focus()" />
<a-button icon="plus" type="link" @click="addItem">Add</a-button>
</div>
<a-divider style="margin: 4px 0;" />
<v-nodes :vnodes="menu" />
</div>
<a-select-option v-for="item in items" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</div>
</template>
<script>
let index = 0
export default {
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes
}
},
data: () => ({ items: ['jack', 'lucy'], selectOpen: false }),
methods: {
addItem() {
console.log('addItem')
this.items.push(`New item ${index++}`)
},
handleSelect(value) {
if (value) {
this.selectOpen = false
}
}
}
}
</script>