vue使用elementui select下拉库组件鼠标hover出现下拉框_element select hover下拉

1. mounted 生命周期里去监听 鼠标进入和鼠标移出事件

    this.$refs.mySelect.addEventListener('mouseenter', function () {
      this.querySelector('.selectel .el-select-dropdown').style.display = 'block'
    })
    this.$refs.mySelect.addEventListener('mouseleave', function () {
      this.querySelector('.selectel .el-select-dropdown').style.display = 'none'
    })
1
2
3
4
5
6

2. 为了保证鼠标进入打开下拉框,还要保证鼠标进入下拉框不关闭

• template

        <div ref="mySelect">
          <el-select
            class="selectel"
            style="float: right"
            v-model="value"
            placeholder="请选择"
            @change="handlechange"
          >
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <i :class="item.icon"></i>
              <span>{{ textSwitch(item.label) }}</span>
            </el-option>
          </el-select>
        </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• css input 和下拉框中间有一个间隙鼠标经过也会关闭下拉框

/deep/.el-select-dropdown {
  margin: 0;
  padding: 5px 0;
}
1
2
3
4