*初级小白*~ 2022-06-08 17:17 采纳率: 97.9%
浏览 65
已结题

关于vantdesign选择器的问题,如何解决?

使用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>


  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-06-09 08:53
    关注

    andt的select blur后会自动清除内容,不过没必要保留输入的值吧,输入值只是作为搜索下拉框选项用的,保留这个中有什么用途?

    而且blur事件value参数应该是对象,并不是输入的值,改下面试试

        const handleBlur = (e) => {
    let value=e.target.value;
    console.log(e,value);//打印参数控制台看下是什么
    setTimeout(()=>{//延时设置输入框的值
    e.target.value=value;
    },200);
        
    
        };
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月23日
  • 已采纳回答 6月15日
  • 创建了问题 6月8日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效