Vue.js 2中如何处理mouseenter、mouseleave避免下拉内容消失

问题根因 #

当前@mouseenter、@mouseleave事件绑定在.link元素上，当鼠标从.link区域移动到下拉的.content区域时，会触发.link的mouseleave事件，将show置为false导致下拉内容直接消失。

解决方案 #

方案1（最简便，推荐）

将鼠标事件绑定到.link和.content的公共父容器.wrapper上，只要鼠标在.wrapper范围内（不管是悬停在触发项还是下拉内容上），就不会触发离开事件，可正常交互下拉内容。
修改后代码如下：

<div class="wrapper" @mouseenter="show = true" @mouseleave="show = false">
  <div class="link">Item</div>
  <div class="content" v-if="show">This is a content</div>
</div>

注意：需确保.wrapper元素没有额外的内外边距导致.link和.content之间出现空隙，避免鼠标移动时意外触发父容器的mouseleave事件。

方案2（防抖优化，适配间隙场景）

如果布局中不可避免存在微小间隙，或者需要避免鼠标快速划过容器时触发不必要的展示/隐藏，可以加延迟防抖处理：

1. 新增定时器变量和处理逻辑：

data() {
  return {
    show: false,
    closeTimer: null
  }
},
methods: {
  handleMouseEnter() {
    clearTimeout(this.closeTimer)
    this.show = true
  },
  handleMouseLeave() {
    this.closeTimer = setTimeout(() => {
      this.show = false
    }, 150)
  }
}

2. 父容器绑定对应的事件即可：

<div class="wrapper" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
  <div class="link">Item</div>
  <div class="content" v-if="show">This is a content</div>
</div>

内容的提问来源于stack exchange，提问作者freakman