Vuetify中mouseenter显示编辑按钮点击弹窗消失问题排查

嘿，这个问题我太熟悉了！你遇到的核心问题是鼠标离开事件的触发时机和编辑状态的逻辑冲突——咱们一步步拆解下：

问题根源 #

你把@mouseenter="item.isEdit=true"和@mouseleave="item.isEdit=false"直接绑定在了<v-card-text>元素上。当你点击编辑按钮时，要么是点击动作中鼠标短暂移出了<v-card-text>的范围，要么是对话框弹出后鼠标自然离开该区域，导致item.isEdit立刻被设为false，编辑按钮随之隐藏，直接打断了你的操作。

解决方案：让编辑状态在对话框打开期间保持激活 #

这个方案能从根本上解决冲突，逻辑更严谨，也更符合用户操作习惯：

1. 添加对话框激活状态 #

在组件的data中新增一个状态，用来记录当前正在打开对话框的item ID：

data() {
  return {
    activeDialogItemId: null, // 记录当前打开对话框的item ID
    // 保留你原有的其他数据...
  }
}

2. 修改点击方法，传递item并记录激活ID #

首先，给点击事件传递当前item（你原代码没传参数，这会导致无法定位到具体item），然后在打开对话框时记录ID：

methods: {
  editDuedate(item) {
    this.activeDialogItemId = item.id; // 标记当前激活的对话框item
    // 这里写你打开对话框的原有逻辑
  },
  closeDialog() {
    this.activeDialogItemId = null; // 对话框关闭时重置状态
    // 这里写你关闭对话框的原有逻辑
  }
}

3. 修改编辑按钮的显示条件 #

让按钮在鼠标悬停或者对应对话框正在打开时都保持显示：

<span 
  v-show="isLoggedIn" 
  v-if="item.isEdit || item.id === activeDialogItemId" 
  class="mr-1" 
  @click="editDuedate(item)"
>
  <DuedateAddM 
    :propItem="item" 
    :duedateId="item.id" 
    :on-close="closeDialog" <!-- 确保子组件关闭时调用父组件的close方法 -->
  />
</span>

4. 给mouseleave事件加判断条件 #

只有当当前item没有打开对话框时，才触发隐藏编辑按钮的逻辑：

<v-card-text 
  class="black--text py-0" 
  @mouseenter="item.isEdit=true" 
  @mouseleave="item.id !== activeDialogItemId && (item.isEdit=false)"
>

额外小提示 #

• 确保你的<DuedateAddM>组件在对话框关闭时，能调用父组件传递的on-close方法，这样activeDialogItemId才能被正确重置。
• 如果你的布局允许，也可以尝试把mouseenter/mouseleave绑定到更大范围的容器（比如包裹按钮和内容的<v-row>），但这个方案受布局影响较大，不如上面的状态控制可靠。

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