Vue页面antd select多选模式下(mode=“multiple“),点击框外下拉选项无法收起的问题完美解决
<a-selectclass="w260"allowClear:maxTagTextLength="maxTagTextLength"mode="multiple":open="isOpen"@focus="isOpenFocus"@ch...
<a-select
class="w260"
allowClear
:maxTagTextLength="maxTagTextLength"
mode="multiple"
:open="isOpen"
@focus="isOpenFocus"
@change="sceneTypeChange"
placeholder="请选择场景类型"
v-model="queryParam.sceneTypeValueList"
>
<a-select-option
v-for="i in sceneTypesList"
:key="i.value"
:value="i.value"
>{{ i.label }}</a-select-option>
</a-select>
问题描述:
先贴代码,发现antd for vue的1.7.8版本下,<a-select>的mode="multiple"模式(多选模式)经常会有在展开的情况下,点击框外无法收起下拉选项框的问题
本人尝试了所有的情况,发现这个模式有以下问题:
1、如果行内选项占1行,那么点击框外空白处可以收起(偶尔无法收起,或者偶尔点击多次才能收起),点击框内无法收起下拉选项框;
2、如果行内选项占多行,点击框内非第一行的空白处可以收起,点击框外空白处偶尔能收起。
————————————————————————
修改思路:
1、查看了官网上的效果,官网上的例程没有这样的问题,尝试升级高版本(v2.2.3)会导致其他的组件不适配的问题;
2、尝试使用自带的方法@focus和@blur,在@focus时将:open属性置为true,@blur时将:open属性置为false,逻辑没问题,可是实现的时候还是不行——
其中@focus动作可以正常捕捉,但是坑爹的是@blur动作无法正常捕捉到
3、尝试在页面上加一个addEventListener,捕捉页面上点击的动作,计划实现这样的效果:
@focus时将:open属性置为true的操作保留,然后就使用点击动作来实现收起,如果点击是在组件外,就把组件的open属性置为false
这里的方法是这样写的:
@focus绑定以下方法:
isOpenFocus () {
this.isOpen = true
console.log('获得焦点')
},
点击收起的方法可以这样写:
this.$nextTick(() => {
document.addEventListener('click', (e) => {
let isSelf = this.$refs.upSelect.contains(e.target)
if (!isSelf) {
this.isOpen = false
}
})
})
其中upSelect是绑定在<a-select>上,注意$ref绑定的对象不能是响应式的!
问题是这个方法无论是放在mounted中还是beforeMounted中都会报错,this.$refs报错undefined
看了下官方文档:
这里提到ref在初始渲染的时候不能去访问,这个时候是还不存在的
有兴趣的小伙伴可以尝试一下放在不同的生命周期中
4、最后是我最终采用的方法,那就是直接把多选的这个select改成tree-select
样式无差别、修改最少,使用过程丝滑,问题完美解决!
更多推荐
所有评论(0)