vue3 使用antdesign的下拉框，如何既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）
<template>
<div>{{ value1 }}</div>
<h2>use a-select-option</h2>
<a-space>
<a-select ref="select" v-model:value="value1" style="width: 120px" :show-search="true" @focus="focus"
@change="handleChange" placeholder="请输入或者选择">
<a-select-option :value="item" v-for="(item, index) in data">{{ item }}</a-select-option>
</a-select>
</a-space>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const data = ['Jack', 'Lucy', 'Disabled', 'yiminghe'];
const value1=ref(null);
const focus = () => {
console.log('focus');
};
const handleChange = value => {
console.log(`selected ${value}`);
};
return {
focus,
handleChange,
value1,
data,
};
},
});
</script>
需要对输入框事件进行处理，oninput记录输入值，onblur时设置model的值。示例如下
<template>
<div>{{ value1 }}</div>
<h2>use a-select-option</h2>
<a-space>
<a-select ref="select" v-model:value="value1" style="width: 120px" :show-search="true" @focus="focus"
@change="handleChange" placeholder="请输入或者选择">
<a-select-option :value="item" v-for="(item, index) in data">{{ item }}</a-select-option>
</a-select>
</a-space>
</template>
<style>
.ant-select-dropdown-empty,.ant-select-item-empty{display:none!important}
</style>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const data = ['Jack', 'Lucy', 'Disabled', 'yiminghe'];
const value1=ref(null);
let init=false;
let inputValue=ref(null);
const focus = (e) => {
if(!init){
e.target.oninput=function(){
inputValue.value=this.value
};
e.target.onblur=function(){
value1.value=inputValue.value
};
init=true;
}
};
const handleChange = value => {
inputValue.value=value
};
return {
focus,
handleChange,
value1,
data,
};
},
});
</script>