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

相关推荐
夕水22 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了25 分钟前
实现一个简单的Vue响应式
前端·vue.js
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401613 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川3 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术4 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再6 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了6 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂6 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷6 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js