vue中防重复弹窗需用状态锁：data中设lock为false，调用前判断并置true，success/close回调重置；composition api用ref锁+onbeforeunmount清理；表格行操作需行级data锁+css禁用。
在 Vue 项目中直接调用 layui.layer.open() 时，因组件复用、事件绑定未清理或响应式更新触发多次渲染，极易导致同一操作反复弹出多个 layer 窗口，遮罩层堆叠、关闭逻辑错乱、内存泄漏风险陡增。
Vue 组件内统一拦截重复调用
第一步：在 data 中声明一个状态锁变量，初始为 false。
第二步：在触发 layer.open 的方法（如 handleEdit）开头判断该锁是否为 true；若是，直接 return，不执行后续逻辑。
第三步：确认可执行后，立即将锁设为 true，并在 layer.open 的 success 回调末尾或 layer.close 的回调中重置为 false——【必须在 success 或 closeCallback 中重置，不能放在 open 外部或 then 链里，否则异步时机不可控】。
这一步操作起来很简单，但漏掉重置会导致后续所有同类操作被永久锁定。
基于 Vue 3 的 Composition API 封装防抖 layer 函数
方法一：使用 ref 创建单例锁 + onBeforeUnmount 清理
在 setup() 中定义 const layerLock = ref(false)，并在封装的 openLayer() 函数中做判断；同时在 onBeforeUnmount 里调用 layer.closeAll() 并重置 lock，防止组件卸载后残留弹窗和锁状态。
方法二：结合 nextTick 确保 DOM 更新完成后再 open
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
某些场景下（如表格行点击后动态渲染表单内容），content 是响应式数据，需等待 DOM patch 完成再调 layer.open，否则可能 content 为空或结构错乱；此时在 lock 判断通过后加 await nextTick()，再执行 open。
注意：nextTick 不是防重复的银弹，它只解决渲染时机问题；lock 才是防重复的核心。
表格工具栏按钮防重复点击（Layui table + Vue 混合场景）
第一步：监听 table 工具栏事件时，在回调入口立即读取当前行 DOM 的 data 属性标记，如 const isClicking = rowDom.data('clicking');
第二步：若 isClicking 为 true，则 return；否则设置 rowDom.data('clicking', true)；
第三步：在 layer 的 yes 回调（如确认删除）、ajax success、或 layer.close 后的 end 回调中，执行 rowDom.removeData('clicking')；
第四步：为兜底，给该行 DOM 添加 CSS 类 .row-click-locked { pointer-events: none; opacity: 0.6; }，视觉上同步禁用；
这种行级锁比全局锁更精准，避免“点 A 行卡住后，B 行也点不了”的误伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
