未来之窗昭和仙君 (十三) 对话框组件— 东方仙盟筑基期
下单
工具栏
订单
组件版本：2023.1
1. 组件概述
CyberWin_Dialog 是一个功能完善的对话框组件，提供了丰富的弹窗交互能力，包括：
- 多种对话框类型（信息提示、确认框、输入框、加载动画等）
- 窗口控制功能（最小化、最大化、全屏、折叠）
- 拖拽移动支持（桌面端鼠标拖拽和移动端触摸拖拽）
- 多种样式主题（适配不同设备风格）
- 自动关闭和动画效果
所有功能通过统一的命名空间访问，接口简洁易用，可满足各种交互场景需求。
2. 核心访问方式
获取对话框核心对象
// 通过 $cq 命名空间获取对话框核心实例
const dialogCore = $cq.对话框();// 验证是否获取成功
if (dialogCore) {console.log("对话框组件加载成功");
} else {console.error("对话框组件未加载");
}通过 $cq.对话框() 方法可获取对话框核心实例，所有功能均通过该实例调用。
3. 主要功能方法
3.1 基础对话框
3.1.1 通用对话框（open()）
// 创建带有确认和取消按钮的对话框
dialogCore.open(title, content, confirmText, cancelText, callback);参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| title | String | 对话框标题 |
| content | String | 对话框内容（支持HTML格式） |
| confirmText | String | 确认按钮文本 |
| cancelText | String | 取消按钮文本 |
| callback | Function | 点击确认按钮后的回调函数 |
示例
dialogCore.open("操作确认","确定要执行此操作吗？","确认","取消",function() {console.log("用户点击了确认");// 执行确认后的逻辑}
);3.1.2 单按钮对话框（ok()）
// 创建只有确认按钮的对话框
dialogCore.ok(title, content, confirmText, callback);参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| title | String | 对话框标题 |
| content | String | 对话框内容（支持HTML格式） |
| confirmText | String | 确认按钮文本 |
| callback | Function | 点击确认按钮后的回调函数 |
示例
dialogCore.ok("操作成功","数据已成功保存到服务器","确定",function() {console.log("用户已确认");// 执行后续操作}
);3.2 高级对话框（layer()）
最强大的对话框方法，支持多种类型和丰富的配置选项：
// 创建高级对话框
dialogCore.layer(content, options);参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| content | String/Object | 对话框内容，根据类型不同可表示文本、URL或配置对象 |
| options | Object | 对话框配置选项（详细见下表） |
options 配置项详解
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | "confirm" | 对话框类型："confirm"、"input"、"notice"、"progress"、"url"、"load" |
| title | String | "提示" | 对话框标题 |
| id | String | "cyberwin_app_artdialog2023" | 对话框唯一标识 |
| width | String | "730px" | 对话框宽度 |
| height | String | "400px" | 对话框高度 |
| mask | Boolean | false | 是否显示遮罩层 |
| move | Boolean | true | 是否允许拖拽 |
| hideclose | Boolean | false | 是否隐藏关闭按钮 |
| hidetitle | Boolean | false | 是否隐藏标题栏 |
| alpha | Number | 1 | 透明度（0-1） |
| time | Number | 0 | 自动关闭时间（毫秒），0表示不自动关闭 |
| align | Number | 5 | 对齐方式（1-9代表不同位置） |
| minbox | String | "N" | 是否显示最小化按钮（"Y"/"N"） |
| maxbox | String | "N" | 是否显示最大化按钮（"Y"/"N"） |
| fullscreen | String | "N" | 是否显示全屏按钮（"Y"/"N"） |
| barbg | String | "#48a731" | 标题栏背景色 |
| skin | String | "phone" | 标题栏样式（"phone"、"pc"、"macos"） |
| callback | Function | 空函数 | 确认操作的回调函数 |
| cancel_caption | String | "关闭" | 取消按钮文本 |
| fold | String | "N" | 是否默认折叠（"Y"/"N"） |
| canfold | String | "N" | 是否允许折叠（"Y"/"N"） |
3.3 不同类型对话框示例
3.3.1 输入对话框
// 创建带输入框的对话框
dialogCore.layer("请输入用户名：", {type: "input",title: "用户信息输入",callback: function(value) {console.log("用户输入的值：", value);// 处理输入值}
});3.3.2 通知对话框
// 创建通知类型对话框
dialogCore.layer("您有3条新消息未读", {type: "notice",title: "新消息通知",time: 5000, // 5秒后自动关闭skin: "pc"
});3.3.3 进度对话框
// 创建进度对话框
dialogCore.layer({/* 进度配置 */}, {type: "progress",title: "数据处理中",mask: true,width: "350px",height: "350px"
});3.3.4 嵌入页面的对话框
// 创建包含网页内容的对话框
dialogCore.layer("detail.html", {type: "url",title: "详情页面",width: "800px",height: "600px",skin: "macos",minbox: "Y",maxbox: "Y",fullscreen: "Y"
});3.3.5 加载动画对话框
// 创建加载动画对话框
dialogCore.layer("", {type: "load",mask: true,width: "200px",height: "200px"
});// 模拟加载完成后关闭
setTimeout(function() {cyberwin_closeAndDeldlg("cyberwin_app_artdialog2023");
}, 3000);4. 窗口控制函数
4.1 关闭对话框
// 关闭并移除指定ID的对话框
cyberwin_closeAndDeldlg(obj_id);参数：obj_id - 对话框的ID属性值
4.2 切换折叠状态
// 切换对话框的折叠/展开状态
cyberwin_query_wlzc_dialog_swithbody(obj_id, 可收缩);参数：
- obj_id - 对话框的ID属性值
- 可收缩 - 是否允许折叠（"Y"/"N"）
4.3 最小化对话框
// 最小化指定对话框
cyberwin_dialog_mindlg(obj_id, 是否mask);参数：
- obj_id - 对话框的ID属性值
- 是否mask - 对话框是否使用了遮罩层（true/false）
4.4 最大化对话框
// 最大化指定对话框
cyberwin_dialog_maxdlg(obj_id, 是否mask, 高度);参数：
- obj_id - 对话框的ID属性值
- 是否mask - 对话框是否使用了遮罩层（true/false）
- 高度 - 最大化后的高度值
4.5 全屏显示对话框
// 全屏显示指定对话框
cyberwin_dialog_fulldlg(obj_id, 是否mask);参数：
- obj_id - 对话框的ID属性值
- 是否mask - 对话框是否使用了遮罩层（true/false）
5. 样式扩展
可以通过以下方法强制添加自定义样式，用于覆盖或扩展默认样式：
// 强制添加自定义样式
$cq.强制加载样式(styleContent);参数：styleContent - CSS样式内容字符串
示例
// 添加自定义样式
$cq.强制加载样式(`.cyberwin_dialog_localapp_fix {border-radius: 15px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}.set_top {background: #2c3e50;}
`);6. 兼容性说明
- 支持桌面端主流浏览器（Chrome、Firefox、Safari、Edge）
- 支持移动端浏览器，包括触摸拖拽操作
- 标题栏样式支持不同设备风格：phone（默认）、pc、macos
- 自动适配不同屏幕尺寸，支持多种对齐方式
7. 常见问题
Q1: 如何确保对话框组件已正确加载？
A1: 可以通过以下代码验证：
if ($cq.对话框() && $cq.对话框() === CyberWin_Dialog) {console.log("组件已正确加载");
} else {console.error("组件加载失败");
}Q2: 对话框无法拖拽移动怎么办？
A2: 检查是否在配置中设置了 move: false，如需开启拖拽功能，确保配置为 move: true（默认值）。
Q3: 如何自定义对话框的按钮样式？
A3: 可以通过 $cq.强制加载样式() 方法添加自定义CSS，覆盖默认按钮样式。
Q4: 对话框内容如何支持滚动？
A4: 当内容超出对话框高度时，会自动显示滚动条，确保内容区域样式设置了 overflow-y: auto（默认已设置）。
阿雪技术观
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量
Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.