vue elementui select下拉库组件鼠标移出时隐藏下拉框

方案：
select 监听 mouseleave事件，当鼠标离开时通过唯一标识ref设置select 下拉框隐藏，并做失焦

<el-select 
v-model="value" 
:popper-append-to-body="false"   
class="select_drop_inner" 
size="small"
placeholder="支持模型体验" 
ref="selectRef" 
@mouseleave.native="closeSelect"><el-option label="xxx" value="xxx"></el-option><el-option label="xxx" value="xxx"></el-option>
</el-select>

popper-append-to-body 属性是设置弹出框插入的位置的变量，设置为false含义为插入到当前select内部，比较方便我们通过当前监听的select元素去获取其对应的下拉框元素，如果设置为true的话对应下拉框元素会在最外层（body层），因为监听对象是当前select，所以不方便直接拿到其对应下拉框元素并设置其的显示和隐藏状态，所以当前方案仅适用于 popper-append-to-body为false的情况
在这里插入图片描述
但是设置popper-append-to-body 为false也可能会导致出现下拉框被盖住不显示的样式问题（和页面的内外层的样式结构有关）
如果有这样的样式问题可以给select设置单独的class,然后设置以下的scss

.select_drop_inner {.el-select-dropdown {position: fixed !important;  //主要是修改下拉框为固定定位来解决不显示问题left可以不设置，默认js计算的已经符合显示需求了top需要在绑定监听的方法中进行计算，因为有页面滚动的高度距离，所以不可以写死设置}
}

mouseleave事件方法中做显隐的操作

closeSelect(){// 注意 selectRef 要和 ref="selectRef" 对应this.$refs.selectRef.$el.querySelector('.el-select-dropdown').style.display = 'none';// 我当前使用的是rem，所以会有 / 100 的操作， px也同理设置// 计算逻辑：原本select距离窗口页面顶部的固定距离 - 当前页面滚动元素（我的是 .page-layout ）的top的滚动高度 + 'px'this.$refs.selectRef.$el.querySelector('.el-select-dropdown').style.top = 3 - (document.querySelector('.page-layout').scrollTop / 100) + 'rem';// 隐藏下拉框后 同时 使 input 失去焦点this.$refs.selectRef.blur()},