Vue中调用layui弹窗需先通过script标签同步引入jQuery和layui并挂载到window，再在onMounted中用window.layui.use加载layer模块后调用；iframe子页DOM操作须在success回调内用getChildFrame获取，或通过window.name配合getFrameIndex安全访问。
在Vue项目中调用layui弹窗时，直接import或Vue.use会报“layui is not defined”或“layer is not a function”，根本原因是layui强依赖全局jQuery且自身未按ES模块规范导出，必须绕过模块系统直接挂载到window对象上才能稳定使用。
确保jQuery和layui正确加载
打开public/index.html，在<head>末尾或<body>最底部插入以下两行（顺序不可颠倒）：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui-src@2.9.13/dist/layui.js"></script>
注意：不能用npm install layui-src后import，也不能把layui.js放进src目录——【它必须通过script标签同步加载，且必须在jQuery之后】。否则layer.use会找不到layui对象，后续所有调用均失败。
立即学习“前端免费学习笔记（深入）”；
在Vue组件中安全调用layer
Vue组件的生命周期钩子中，必须等DOM就绪、layui已初始化后再调用layer。推荐在onMounted（Vue 3）或mounted（Vue 2）里执行：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
第一步：用window.layui.use包裹layer调用，确保模块加载完成
第二步：在回调函数内获取layer对象，再执行open/confirm/msg等方法
第三步：避免在setup()顶层或data()中直接写layer.open()——此时layui可能尚未加载
示例代码（Vue 3 + setup语法糖）：
const openDialog = () => {
window.layui.use('layer', () => {
const layer = window.layui.layer;
layer.open({
type: 1,
title: '用户信息',
content: '<p>姓名：张三</p><p>邮箱：zhang@example.com</p>',
area: ['400px', '200px']
});
});
};
调用iframe弹窗并操作子页面DOM
方法一：用success回调精准获取子页jQuery对象
① layer.open时配置success选项：
success: (layero, index) => {
const $body = window.layui.layer.getChildFrame('body', index);
$body.find('input[name="username"]').val('admin');
}
② 这一步必须写在success里——【若提前在open外调用getChildFrame，返回空对象，赋值无效】
③ 若子页是Vue应用，.val()只改DOM不触发响应式更新，应让子页暴露setFormValue方法供父页调用
方法二：用window.name规避index失效风险
子页HTML头部加入：
<script>window.name = "userEditFrame";</script>
父页中：
const idx = window.layui.layer.getFrameIndex("userEditFrame");
if (idx > 0) {
const $body = window.layui.layer.getChildFrame('body', idx);
$body.find('[name="email"]').val('test@domain.com');
}
