后台管理系统中，鼠标事件问题，一般列表或者树形右侧的更多按钮功能，可以使用el-dropdown下拉菜单组件，icon一直显示没有那么美观，这是的需求是实现hover显示隐藏。

这下问题来了鼠标放在下拉框上，icon会隐藏，要的是鼠标离开列表才隐藏。我这里使用visible-change事件配合鼠标mouseleave事件。

// template
<div class="dropdown" v-if="current?.id === item.id">
    <el-dropdown @visible-change="visibleChangeHandle">
      <el-icon class="more">
        <MoreFilled />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="onDelete(item)"
            >删除</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
</div>
 
@mouseenter="rowMouseEnter(item)"
@mouseleave="rowMouseEnter({ id: -1 })"
// js核心逻辑，下拉框隐藏时会触发visible-change事件，控制icon显示隐藏的开关，鼠标移除会触发隐藏回调函数。
const isHover = ref(false)
const visibleChangeHandle = (evt) => {
  if (!evt) {
    current.value = { id: -1 }
  }
  isHover.value = evt
}
 
const rowMouseEnter = (item) => {
  if (isHover.value) return
  nextTick(() => {
    current.value = item
  })
}