关于 Vue design select dropdownRender 加入 input 引发的问题 (已解决)

in 前端 with 0 comment

关于 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

我们一个个问题解决:

既然 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>

我们第一个问题解决了

演示了一番,由此发现第二个问题


产生问题原因 2

我们依次解决

1、第一个问题:

    computed: {
      list() {
          // 通过输入框中的数据来进行筛选
          let search = this.search
          if(search) {
              return this.options.filter(option => {
                  return option.name.indexOf(search) >= 0
              })
          }
          return this.options
      }
    }

如上代码,通过输入框中的数据来进行筛选

如果是远程数据的话,可以新增 一个 watch ,监听 this.search 数据,触发远程数据读取

2、第二个问题: 新增一个 select blur 事件,input blur 事件 ,select 选中事件

当触发这些事件的时候,我们需要关闭 select

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:

图片描述...

Comments are closed.