🖥️ 新页面

ThinkAdmin 提供多种页面打开方式，支持弹窗、后台内容区跳转和 iframe 弹层等不同展示模式。

🚀 主要功能

多种方式: 支持三种不同的页面打开方式
灵活配置: 支持多种参数配置和自定义
关闭刷新: 支持弹窗或 iframe 关闭后刷新指定表格或当前页面
响应式: 支持响应式页面布局
用户友好: 提供友好的用户交互体验
开发简化: 简化页面开发的复杂度

📋 打开方式

1. data-modal 弹窗显示

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

2. data-open 内容区打开

适用场景: 常用于后台内容区页面跳转
特点: 使用 HASH 路由加载后台页面，适合复杂操作
用户体验: 保持在当前后台框架内操作
使用场景: 复杂表单、数据管理、系统配置等

3. data-iframe 独立页面

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

⚙️ 参数配置

位置设置

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

尺寸设置

data-area: 设置宽高，如 "['300px','400px']"
data-width: 设置宽度，如 "300px"；data-modal 未配置 data-area 时使用该宽度
data-height: 设置高度，如 "400px"；当前 data-iframe 会读取该参数，data-modal 不读取
建议使用: 弹窗需要同时控制宽高时优先使用 data-area
响应式: 支持百分比和固定像素值

功能设置

data-close-refresh: 关闭弹窗后自动重载数据
data-title: 设置弹窗标题
data-full: 设置全屏显示
data-maxmin: 设置是否显示最大化/最小化按钮

当前 data-modal 源码会把 data-area 或 data-width 传给 $.form.modal()；$.form.modal() 会在 data-area 以 [ 开头时转换为数组。当前 data-iframe 会使用 data-area，或用 data-width / data-height 组成尺寸数组。

详细参数说明

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