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

正函数2024-01-08 20:11

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'
 })

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

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>

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

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