vue使用elementui 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'
     })
  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>
  • css input 和下拉框中间有一个间隙鼠标经过也会关闭下拉框

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

相关推荐
浪裡遊8 分钟前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
梵得儿SHI2 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
peachSoda74 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
fruge4 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
paopaokaka_luck4 小时前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts
MyFreeIT6 小时前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上6 小时前
day8_elementPlus
前端·javascript·vue.js
Jeffrey__Lin6 小时前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
Miketutu6 小时前
vxe-table编辑模式适配el-date-picker
javascript·vue.js·elementui
咖啡の猫6 小时前
Vue-MVVM 模型
前端·javascript·vue.js