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;
    }

相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放7 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
markyankee10111 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘13 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹13 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_9709563914 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘15 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常15 小时前
vue中添加原生右键菜单
javascript·vue.js