Vue3中直接使用layer报“Cannot read property 'use' of undefined”是因为layer依赖jQuery和Vue2的Vue.prototype，而Vue3已弃用该机制；正确解法是通过CDN引入完整版layui.js，从window.layui获取layer，并用createApp动态挂载Vue组件到layer弹窗中，同时注意手动unmount和z-index样式修复。
Vue3 中直接用 layer 会报 Cannot read property 'use' of undefined
这是因为原生 layer 是 jQuery 时代的产物，依赖全局 window.jQuery 和 window.layer，而 Vue3 已弃用 Vue.prototype，且默认不带 jQuery。强行在 setup() 里调 layer.open() 会触发 “layer is not defined” 或 “$ is not defined”。
真正能跑通的路径只有一条：绕过 jQuery 依赖，用 Layui 官方维护的纯 JS 版本 layui.js（含内置 layer），并确保它在 Vue 应用启动前就挂载到 window 上。
- 别装
layui-layer或layer-vue这类第三方封装包——它们大多适配 Vue2，Vue3 下事件绑定、props 透传、unmount清理全失效 - 别在
main.js里import 'layui-src'—— Vite/webpack 会尝试解析其内部require，导致构建失败或运行时layui未注册 - 必须用 CDN 或本地
script标签引入，让layui在全局生效，再手动从window.layui取layer
按需加载：在组件内动态 import layui 并提取 layer
想避免全量加载 layui.js（约 300KB+），又想确保 layer 可用，就得在用到弹窗的组件里做懒加载 + 缓存。不能每次点击都重新 fetch，也不能让 layer 被多次初始化。
核心是：用 let layer = null 缓存实例，首次调用时通过 import(...) 加载模块（注意不是 import layui from 'xxx'），然后从 window.layui 拿出 layer 对象。
立即学习“前端免费学习笔记（深入）”；
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
const loadLayer = async () => {
if (window.layer) return window.layer;
if (!window.layui) {
// 动态插入 script（仅一次）
const script = document.createElement('script');
script.src = '/layui/layui.js'; // 本地部署路径，或 CDN
script.defer = true;
document.head.appendChild(script);
await new Promise(resolve => script.onload = resolve);
}
// 等 layui 初始化完成（它会自动执行 define，但 layer 模块需显式 use）
await new Promise(resolve => {
if (window.layui && window.layui.layer) {
resolve();
} else {
const check = () => {
if (window.layui?.layer) resolve();
else setTimeout(check, 50);
};
check();
}
});
return window.layui.layer;
};
-
/layui/layui.js必须是完整版 Layui（含layer模块），不能只放layer.js单文件 - CDN 推荐用
https://cdn.jsdelivr.net/npm/layui-src@2.9.14/dist/layui.js（Layui 2.9.x 是最后稳定版） - 如果项目用 Vite，需在
vite.config.js中配置build.rollupOptions.external: ['layui']，防止打包时报错
Vue 组件弹窗通信：用 layer.open({ content: el }) + createApp 挂载
原生 layer.open() 的 content 支持 DOM 元素，这是和 Vue3 通信的关键入口。不能传字符串 HTML（丢失响应性），也不能传函数组件（layer 不认识 setup）。
正确做法是：创建一个空 <div>，用 createApp 把 Vue 组件挂上去，再把该 div 传给 layer.open；关闭时手动 unmount，否则内存泄漏。
import { createApp, h } from 'vue';
import MyModal from './MyModal.vue';
const openModal = async (props) => {
const layer = await loadLayer();
const div = document.createElement('div');
const app = createApp({
render() {
return h(MyModal, {
...props,
onClose: () => {
app.unmount();
div.remove();
layer.close(index);
}
});
}
});
app.mount(div);
const index = layer.open({
type: 1,
title: '自定义弹窗',
area: ['500px', '300px'],
content: div,
success: () => {
// 确保 layer 框架渲染完成后才让 Vue 渲染（可选）
},
cancel: () => {
app.unmount();
div.remove();
}
});
};
-
MyModal.vue内部用defineProps接收参数，用emit('close')触发关闭逻辑 - 务必在
cancel和onClose里调app.unmount()+div.remove()，否则 Vue 实例残留、事件监听器不释放 - 不要用
layer.closeAll()—— 它会误关其他弹窗，应始终记下index后精准关闭
容易被忽略的兼容点：样式隔离与 z-index 冲突
layer 默认插入到 document.body，它的 DOM 节点不在 Vue 组件树内，所以 Scoped CSS 生效不了，z-index 也容易被 Element Plus 或 Ant Design Vue 的 Modal 盖住。
- 全局加一条样式修复层级：
body .layui-layer { z-index: 2000 !important; }（Vue3 的<style>无法穿透到 body 下，得写在index.html的<style>里或主 CSS 文件中） - 弹窗内容若含表单控件（如
<input>），需手动加tabindex="0"，否则键盘Tab切换会跳过 - 如果项目用了
Shadow DOM（比如 Web Component 封装），layer的浮层会被截断，此时只能放弃layer，改用Dialog或Teleport自研
最麻烦的其实是销毁时机 —— layer 关闭动画结束前就调 unmount，会导致 Vue 组件还没完全退出就被清掉；但等太久又卡 UI。稳妥做法是在 layer.close() 后加 setTimeout(() => app.unmount(), 300)，硬等动画帧。
