关于 Vue design select dropdownRender 加入 input 引发的问题 (已解决)
预期本来想达到的想过如图:
一番操作猛如虎.....
<a-select ref="selectInput" v-model:value="value" >
<template #dropdownRender="{ menuNode: menu }">
<div ><a-input v-model:value="search" id="inputSearch" placeholder="请输入关键词" /></div>
<v-nodes :vnodes="menu" />
</template>
<a-select-option :label="v.name" :value="v.id" v-for="(v, k) in options" :key="k">
{{ v.name }}
</a-select-option>
</a-select>
由此发现一个问题: 点击展开下拉后，再次点击搜索输入框时，选择框被关闭了!
我瞬间急不可耐
打开 百度，搜索 Vue design select dropdownRender 问题
....
....
花了几十分钟，测试了数种方案... 依旧无法解决
算了，发扬我牛逼我最强的口号 我们来从根本上解决这个问题
产生问题原因 1
- 当焦点事件离开
select的时候，会触发blur事件，会自动收缩 下拉菜单
我们一个个问题解决:
既然 blur 事件，会自动关闭，那我们就手动接管 select 展开收缩
升级版
<div @click="e => { e.preventDefault(); this.selectOpen = !this.selectOpen; }">
<a-select ref="selectInput" v-model:value="value" :open="selectOpen" @select="selectOpen = false">
<template #dropdownRender="{ menuNode: menu }">
<div ><a-input v-model:value="search" id="inputSearch" placeholder="请输入关键词" /></div>
<v-nodes :vnodes="menu" />
</template>
<a-select-option :label="v.name" :value="v.id" v-for="(v, k) in options" :key="k">
{{ v.name }}
</a-select-option>
</a-select>
</div>
- 我们在外部套了一层div容器
- 【新增】了 一个click事件: 点击 select 的时候，展开下拉菜单
@click="e => { e.preventDefault(); this.selectOpen = !this.selectOpen; }
- 【新增】了一个变量 selectOpen: 用于控制展开收缩
- 【新增】了一个事件 :open="selectOpen": 用于根据变量控制展开收缩
我们第一个问题解决了
演示了一番，由此发现第二个问题
- 输入关键词的时候无法进行搜索
- 当离开 select 焦点的时候，我们无法收缩 select
产生问题原因 2
- 之前的搜索模式会自动根据输入框自动搜索，但是现在我们采用另外的 input 去进行搜索的话，无法触发 搜索事件
- 由于之前是 blur 触发收缩 select，被我们接管后无法 没有关闭 selectOpen，导致无法关闭
我们依次解决
1、第一个问题:
- 我们新增一个 变量 search，再新增一个 computed , 使用 list 接管 options 数据
computed: {
list() {
// 通过输入框中的数据来进行筛选
let search = this.search
if(search) {
return this.options.filter(option => {
return option.name.indexOf(search) >= 0
})
}
return this.options
}
}
在 input 外层容器，新增触发焦点
如上代码，通过输入框中的数据来进行筛选
如果是远程数据的话，可以新增 一个 watch ，监听 this.search 数据，触发远程数据读取
2、第二个问题: 新增一个 select blur 事件，input blur 事件 ，select 选中事件
当触发这些事件的时候，我们需要关闭 select
- a-select 【新增】 @select="selectOpen = false" @blur="blurEvent"
- a-input 【新增】 @blur="blurEvent"
- a-input 【新增】 id="inputSearch"
blurEvent 方法
blurEvent() {
let f = 'inputSearch'
// 获取当前焦点 id
if(document.activeElement.id != f) {
this.selectOpen = false
}
}
为什么要加 id="inputSearch"，因为我们要判断，当离开 a-select 的时候，焦点是不是来到了输入框中，如果是的话，则不要收缩下拉菜单
否则都关闭
最终代码 及演示
我的代码为 多选模式 和 单选模式，判断判断焦点改为了 class 来判断
https://github.com/surest-sky/example/blob/master/vue/Country.vue
演示GIF:
本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Oct 20, 2021 at 01:36 pm