<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
样式无差别、修改最少，使用过程丝滑，问题完美解决！