🖥️ 新页面

ThinkAdmin 提供多种页面打开方式，支持弹窗、新窗口和独立页面等不同的展示模式。

🚀 主要功能

多种方式: 支持三种不同的页面打开方式
灵活配置: 支持多种参数配置和自定义
自动重载: 支持页面关闭后自动重载数据
响应式: 支持响应式页面布局
用户友好: 提供友好的用户交互体验
开发简化: 简化页面开发的复杂度

📋 打开方式

1. data-modal 弹窗显示

适用场景: 常用于简单页面弹窗显示
特点: 轻量级，适合快速操作
用户体验: 无需跳转页面，操作便捷
使用场景: 编辑表单、详情查看、确认操作等

2. data-open 新窗口打开

适用场景: 常用于复杂页面新窗口打开
特点: 功能完整，适合复杂操作
用户体验: 独立窗口，操作空间大
使用场景: 复杂表单、数据管理、系统配置等

3. data-iframe 独立页面

适用场景: 常用于引入独立页面
特点: 完全独立，适合第三方集成
用户体验: 无缝集成，保持一致性
使用场景: 第三方页面、外部系统、独立模块等

⚙️ 参数配置

位置设置

data-offset: 设置弹窗位置，如 "r" 表示右侧
自动居中: 默认情况下自动居中显示
灵活定位: 支持多种位置配置
位置选项: 支持 "l"(左)、"r"(右)、"t"(上)、"b"(下) 等

尺寸设置

data-area: 设置宽高，如 "['300px','400px']"
data-width: 设置宽度，如 "300px"
data-height: 设置高度，如 "400px"
建议使用: 建议使用 width 和 height 参数
响应式: 支持百分比和固定像素值

功能设置

data-close-refresh: 关闭弹窗后自动重载数据
data-title: 设置弹窗标题
data-full: 设置全屏显示
data-max: 设置最大化显示
data-min: 设置最小化显示

js 改动

/*! 注册 data-modal 事件行为 */
onEvent('click', '[data-modal]', function () {
    var un = undefined, emap = this.dataset, data = {open_type: 'modal'};
    return applyRuleValue(this, data, function () {
        // old return $.form.modal(emap.modal, data, emap.title || this.innerText || '编辑', un, un, un, emap.area || emap.width || '800px', emap.offset || 'auto', emap.full !== un);
        // new ： 处理area类型 string 转 object
        return $.form.modal(emap.modal, data, emap.title || this.innerText || '编辑', un, un, un, (typeof emap.area === 'string' ? eval("(" + emap.area + ")") : undefined) || emap.width || '800px', emap.offset || 'auto', emap.full !== un);
    })
});

详细参数说明

offset 位置参数（详情可参照 layui 官方参数说明）：

参数值	说明	示例
`'auto'`	默认坐标，即垂直水平居中	`data-offset="auto"`
`'100px'`	只定义 top 坐标，水平保持居中	`data-offset="100px"`
`'t'`	快捷设置顶部坐标	`data-offset="t"`
`['100px', '50px']`	同时定义 top、left 坐标	`data-offset="['100px', '50px']"`
`'r'`	快捷设置右边缘坐标	`data-offset="r"`
`'b'`	快捷设置底部坐标	`data-offset="b"`
`'l'`	快捷设置左边缘坐标	`data-offset="l"`
`'lt'`	快捷设置左上角	`data-offset="lt"`
`'rt'`	快捷设置右上角	`data-offset="rt"`
`'lb'`	快捷设置左下角	`data-offset="lb"`
`'rb'`	快捷设置右下角	`data-offset="rb"`

🔧 实际应用示例

示例1：弹窗表单编辑

<!-- 使用 data-modal 打开编辑表单 -->
<button data-modal="{:url('edit')}" 
        data-title="编辑用户" 
        data-width="800px"
        data-close-refresh="userTable"
        class="layui-btn layui-btn-sm">
    <i class="layui-icon layui-icon-edit"></i> 编辑
</button>

示例2：新窗口打开复杂页面

<!-- 使用 data-open 打开新窗口 -->
<button data-open="{:url('detail')}" 
        data-title="用户详情"
        class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon layui-icon-search"></i> 查看详情
</button>

示例3：iframe 独立页面

<!-- 使用 data-iframe 打开独立页面 -->
<button data-iframe="{:url('select')}" 
        data-title="选择用户"
        data-width="900px"
        data-height="600px"
        class="layui-btn layui-btn-sm">
    <i class="layui-icon layui-icon-user"></i> 选择用户
</button>

示例4：JavaScript 调用

// 使用 JavaScript 打开弹窗
$.form.modal('{:url("edit")}', {id: 123}, '编辑用户', undefined, undefined, undefined, '800px');

// 使用 JavaScript 打开新窗口
$.form.open('{:url("detail")}', '用户详情');

// 使用 JavaScript 打开 iframe
$.form.iframe('{:url("select")}', '选择用户', '900px', '600px');

示例5：关闭后刷新数据

<!-- 关闭弹窗后自动刷新指定表格 -->
<button data-modal="{:url('add')}" 
        data-title="添加用户"
        data-close-refresh="userTable"
        class="layui-btn layui-btn-sm">
    添加
</button>

<!-- 表格ID -->
<table id="userTable" class="layui-table">
    <!-- 表格内容 -->
</table>

<script>
// 表格会自动在弹窗关闭后刷新
$.layTable.create('userTable', {
    url: '{:url("index")}',
    // ... 其他配置
});
</script>