el-dropdown 下拉菜单 结合JQ做鼠标移入显示 移出隐藏事件

需求描述

在做后台管理系统的时候, 遇到一个需求,那就是,鼠标移入某个行元素的时候,需要显示下拉菜单按钮,移入下拉菜单的时候需要显示下拉菜单里的功能按钮

需求如图:
如图所示,当鼠标移入下拉菜单的节点的时候,要求触发下拉菜单的图标是不能隐藏的
而简单的通过CSS控制鼠标的显示隐藏是无法做到这一点的

思路

跟大多数人一样,首先看到设计稿和需求的时候 想到的是利用 element 的 下拉菜单组件或popover组件结合鼠标的移入移除事件来实现

操作过程

针对css写hover 事件 然后通过 display: none 方法实现存在bug的过程 我就不举例说明了,相信大家对这个思路都很明确,下面就介绍一下完整的功能思路

html结构

```html

   

     

       {{ index + 1 }}
       {{ item.name }}
     
     

       
         
           
         
         
           {{ $t('添加') }}
           {{ $t('移动') }}
           {{ $t('删除') }}
         
       
     
   
 

css
```html
.pahse-left {
 .pahse-left__item {
    height: 50px;
    padding: 13px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    &:hover {
      background-color: #e7f9f5;
      /* 此处是为了将css hover 权重加高，避免出现
      鼠标在上一个下拉菜单的节点上，直接移入另外一个对象的时候，
      下拉菜单按钮不出现的问题
       */
      .btn {
        display: block !important;
      }
    }
    &--active {
      background-color: #e7f9f5;
    }
    .info {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      span {
        display: inline-block;
      }
      .info-sort {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        color: #fff;
        background-color: #10C29B;
        margin-right: 8px;
      }
      .info-name {
        width: calc(100% - 32px);
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .btn {
      display: none;
      .btn-icon {
        transform: rotate(90deg);
      }
    }
  }
}

重点来了

首先说一下思路:
第一步: 当鼠标移入下拉菜单节点的时候,要想办法让下拉菜单按钮不隐藏
第二步: 移除目标对象的时候隐藏下拉菜单按钮

有了上面的逻辑,实现起来就简单了,通过jq注入一个hover事件

// 注入hover事件
initHover() {
  this.$nextTick(()=>{
    $('.pahse-left__item').off('mouseenter')
    $('.pahse-left__item').off('mouseleave')
    $('.pahse-left__item').hover((e)=>{
      $(e.target).find('.btn--hover').show()
    }, ()=>{
      this.controlShow()
    })
  })
},
// 通过唯一标识 id 判断当前触发的节点是哪一个节点的下拉菜单
controlShow() {
  let $id = $('ul.course-drop:visible').attr('id')
  $('.pahse-left__item').find('.btn--hover').hide()
  $('.pahse-left__item').find('.el-dropdown-link[aria-controls=' + $id + ']').closest('.btn--hover').show()
},
// 通过下拉菜单展开事件，来控制下拉按钮的显示
controlDrop(val){
   // 节点的显示，要异步处理，否则会获取不到节点
   setTimeout(()=>{
     if (val){
       this.controlShow
     } else {
       $('.pahse-left__item').find('.btn--hover').hide()
     }
   }, 0)
 },

到这里整个功能就完成的差不多了, 如果各位大神有更好的方法,欢迎留言