🖥️ 打开新页面

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);
    })
});

详情可参照layui官方参数说明

  • offset: 'auto' 默认坐标，即垂直水平居中
  • offset: '100px' 只定义top坐标，水平保持居中
  • offset: 't' 快捷设置顶部坐标
  • offset: ['100px', '50px'] 同时定义top、left坐标
  • offset: 'r' 快捷设置右边缘坐标
  • offset: 'b' 快捷设置底部坐标
  • offset: 'l' 快捷设置左边缘坐标
  • offset: 'lt' 快捷设置左上角
  • offset: 'rt' 快捷设置右上角
  • offset: 'lb' 快捷设置左下角
  • offset: 'rb' 快捷设置右下角

如有更可行的方式，可随时联系 L ，如有不严谨或者不规范的地方欢迎指正。

最近更新:
Contributors: 邹景立