keepAlive模式下切换页面时缓存页面中el-select已展开的选项框无法自动关闭解决方案

问题描述

如下图,在keepAlive缓存的页面中使用element中的select选择器，打开弹出框后不手动关闭，直接切换页面，会出现弹出框仍然展示在页面上的现象。

问题原因

1. 
   
2. select选择器提供一个属性 popper-append-to-body 为false时，弹出框是放置在select选择器所在层级中，为true时，允许将弹出框插入至body元素中。
   

2. 
   
3. 本页面被keepAlive缓存后 再切出本页面时不会触发select选择器组件的blur事件，
   

所以当弹出框被插入至body元素中时，切出缓存页面 无法触发select选择器组件的blur事件，弹出框在body中无法隐藏

解决方法1

设置属性 popper-append-to-body为false，弹出框不会直接插入至body元素中，页面切换后弹出框也会被隐藏

局限性：
某些场景需要设置select选择器上级元素超出隐藏，弹出框如果超出上级元素的范围则无法完全展示

解决方法2

elementselect选择器源码中弹出框开启关闭由变量visible控制，将elselect组件包装一下，在deactivated生命周期钩子里设置弹出框关闭，注册组件时

// SelectWrapper 组件

<script lang="ts">
import { Mixins, Component, Watch } from 'vue-property-decorator';
import { Select } from 'element-ui';


@Component({
name: 'ElSelect',

})
export default class ElSelect extends Mixins(Select) {
visible: boolean | undefined;

deactivated() {
this.visible = false;

    }

}

</script>

入口文件全局注册新的SelectWrapper组件，替换掉elementselect选择器，这样可以做到在业务组件中无感使用

 app.component('el-select', SelectWrapper);