bim_engine/docs/Dialog.md

弹窗组件 (Dialog)

BimEngine SDK 提供了可拖拽、可缩放的通用弹窗组件 DialogManager (底层基于 BimDialog)，支持自定义内容和高度定制的样式。

1. 组件作用

• 提供浮动的交互窗口。
• 支持任意 HTML 内容挂载。
• 内置拖拽移动和拖拽缩放功能。
• 支持丰富的样式定制接口。

2. 初始化与使用

通过 BimEngine 实例访问：

const engine = new BimEngine('container-id');
// engine.dialog 即为 DialogManager 实例

3. 配置项 (DialogOptions)

engine.dialog.create(options) 方法接受以下配置：

属性	类型	默认值	说明
title	string	'Dialog'	弹窗标题
content	string | HTMLElement	-	弹窗内容
width	number | string	300	宽度
height	number | string	'auto'	高度
position	DialogPosition	'center'	初始位置 (支持 'center', 'top-left' 等或坐标对象)
draggable	boolean	true	是否可拖拽
resizable	boolean	false	是否可调整大小
minWidth	number	200	最小宽度
minHeight	number	100	最小高度
onClose	Function	-	关闭时的回调
backgroundColor	string	rgba(17, 17, 17, 0.95)	窗体背景色
headerBackgroundColor	string	#2a2a2a	标题栏背景色
titleColor	string	#fff	标题文字颜色
textColor	string	#ccc	内容默认文字颜色
borderColor	string	#444	边框颜色

4. 使用案例

案例 1: 创建基本弹窗

engine.dialog.create({
    title: '欢迎',
    content: 'Hello World!',
    width: 400
});

案例 2: 创建包含复杂 DOM 的弹窗

const div = document.createElement('div');
div.innerHTML = '<button>Click Me</button>';
div.querySelector('button').onclick = () => alert('Clicked');

engine.dialog.create({
    title: '交互组件',
    content: div,
    resizable: true
});

案例 3: 定制样式 (红色主题)

engine.dialog.create({
    title: '警告',
    content: '这是一个红色主题的警告弹窗。',
    backgroundColor: 'rgba(100, 0, 0, 0.9)', // 深红背景
    headerBackgroundColor: '#ff0000',        // 鲜红标题栏
    titleColor: '#ffffff',
    borderColor: '#ff4444'
});

案例 4: 监听关闭事件

const dlg = engine.dialog.create({
    title: '任务',
    content: '处理中...',
    onClose: () => {
        console.log('弹窗已关闭');
    }
});

// 手动关闭
// dlg.close();