vue elementui select多选下拉库组件鼠标移出隐藏下拉框_vue el-select 隐藏下拉框

elementui select 多选下拉库组件 鼠标移出 隐藏下拉框

template:

<el-select
    multiple
    clearable
    filterable
    collapse-tags
    :popper-append-to-body="false"
    placeholder="请选择"
    v-model="value"
    class="searchFormItemWidth"
    style="width: 200px;"
    ref="selectRef"
    @mouseleave.native="closeSelect"
 >
     <el-option
        v-for="(item, _idx) in styleTags"
           :key="_idx"
           :label="item"
           :value="item"
      ></el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

js:

methods: {
  closeSelect() {
  	  // 注意 selectRef 要和 ref="selectRef" 对应
      this.$refs.selectRef.$el.querySelector('.el-select-dropdown').style.display = 'none';
      // 隐藏下拉框后 同时 使 input 失去焦点
      this.$refs.selectRef.blur()
    },
}
1
2
3
4
5
6
7
8

css: （注意：input 和下拉框中间有一个间隙鼠标经过也会关闭下拉框，所以间距要设置为0）

<style lang="scss" scoped>
  ::v-deep .searchFormItemWidth .el-select-dropdown {
      margin-top: 0;
      margin-left: -5px;
   }
</style>
1
2
3
4
5
6