使用vantdesign的选择器,当输入值以后,鼠标失去焦点,如何让值保留在输入框中
<template>
<a-select
v-model="result"
:show-search="true"
:not-found-content="null"
:filter-option="true"
:allowClear="true"
style="width: 180px"
placeholder="请选择或输入水果"
@search="handleSearch"
@blur="handleBlur"
@change="handleChange"
>
<a-select-option
v-for="(item, index) in list"
:key="index"
:value="item.id"
>
{{ item.val }}
</a-select-option>
</a-select>
</template>
<script>
//导入组合式api
import { ref, reactive, computed } from "vue";
export default {
name: "Child",
//vue3中全新的编程方式:组合式api
setup() {
const list = [
{ id: "1", val: "香蕉" },
{ id: "2", val: "苹果" },
{ id: "3", val: "火龙果" },
];
const result = ref("undefined");
const handleSearch = (value) => {
handleChange(value);
};
const handleChange = (value) => {
result.value = value != null && value != "" ? value : undefined;
console.log(result.value,'ss')
};
const handleBlur = (value) => {
result.value = value;
};
return {
list,
result,
handleBlur,
handleSearch,
handleChange,
};
},
};
</script>
andt的select blur后会自动清除内容,不过没必要保留输入的值吧,输入值只是作为搜索下拉框选项用的,保留这个中有什么用途?
而且blur事件value参数应该是对象,并不是输入的值,改下面试试
const handleBlur = (e) => {
let value=e.target.value;
console.log(e,value);//打印参数控制台看下是什么
setTimeout(()=>{//延时设置输入框的值
e.target.value=value;
},200);
};
在失去焦点里 获取 值赋给 input 的model 不过 我寻思 失去焦点 只要不删除 input 值就是保留的啊
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!