Dialog 对话框

模态对话框组件，用于展示重要信息或进行用户交互。

基础用法

javascript

const dialog = new SaDialog({
  title: '提示',
  content: '这是一条提示信息',
  onConfirm: () => {
    console.log('确认');
  }
});

dialog.open();

自定义按钮

javascript

const dialog = new SaDialog({
  title: '自定义按钮',
  content: '可以自定义按钮文本和回调',
  confirmText: '确定',
  cancelText: '取消',
  onConfirm: () => {
    console.log('点击了确定');
    dialog.close();
  },
  onCancel: () => {
    console.log('点击了取消');
    dialog.close();
  }
});

dialog.open();

自定义内容

可以通过 content 传入 HTML 字符串或 DOM 元素。

javascript

const dialog = new SaDialog({
  title: '自定义内容',
  content: '<div style="padding: 20px;"><p>这是自定义的 HTML 内容</p></div>',
  width: '500px'
});

dialog.open();

无标题对话框

设置 title 为空字符串可以隐藏标题栏。

javascript

const dialog = new SaDialog({
  title: '',
  content: '无标题的对话框',
  width: '400px'
});

dialog.open();

API

构造函数参数

参数	说明	类型	默认值
options	配置选项	`SaDialogOptions`	`{}`

配置选项

参数	说明	类型	可选值	默认值
title	标题	`string`	-	`'提示'`
content	内容	`string \| HTMLElement`	-	`''`
width	对话框宽度	`string`	-	`'500px'`
height	对话框高度	`string`	-	-
resizable	是否可调整大小	`boolean`	-	`false`
maximizable	是否可最大化	`boolean`	-	`false`
closable	是否显示关闭按钮	`boolean`	-	`true`
confirmText	确认按钮文本	`string`	-	`'确定'`
cancelText	取消按钮文本	`string`	-	`'取消'`
showCancel	是否显示取消按钮	`boolean`	-	`true`
icon	标题图标	`string`	-	-
topLevel	是否在顶级窗口弹出（用于 iframe）	`boolean`	-	`false`
onConfirm	确认回调	`function()`	-	-
onCancel	取消回调	`function()`	-	-
onClose	关闭回调	`function()`	-	-

方法

方法名	说明	参数	返回值
open	打开对话框	-	`void`
close	关闭对话框	-	`void`
maximize	最大化对话框	-	`void`
restore	恢复对话框大小	-	`void`
toggleMaximize	切换最大化状态	-	`void`
destroy	销毁实例	-	`void`

静态方法

方法名	说明	参数	返回值
SaDialog.confirm	显示确认对话框	`options`	`Promise<boolean>`
SaDialog.alert	显示提示对话框	`options`	`Promise<void>`
SaDialog.open	打开 iframe 对话框（SaIframeModal）	`options`	`SaIframeModal`

示例代码

手动创建实例

javascript

const dialog = new SaDialog({
  title: '确认删除',
  content: '确定要删除这条记录吗？',
  width: '400px',
  onConfirm: () => {
    console.log('确认删除');
    dialog.close();
  },
  onCancel: () => {
    console.log('取消删除');
    dialog.close();
  }
});

dialog.open();

使用静态方法

javascript

// 确认对话框
SaDialog.confirm({
  title: '确认删除',
  content: '确定要删除吗？'
}).then(() => {
  console.log('用户点击了确认');
}).catch(() => {
  console.log('用户点击了取消');
});

// 提示对话框
SaDialog.alert({
  title: '提示',
  content: '操作成功！'
}).then(() => {
  console.log('对话框已关闭');
});

实际使用场景

场景 1：确认删除对话框

在删除操作前显示确认对话框，防止误操作。

html

<button class="sa-button sa-button--danger" data-icon="delete" onclick="handleDelete()">
  删除数据
</button>

<script>
  SA.init('body');
  
  function handleDelete() {
    const dialog = new SaDialog({
      title: '确认删除',
      content: '此操作将永久删除数据，是否继续？',
      icon: 'warning-filled',
      confirmText: '确定删除',
      cancelText: '取消',
      width: '400px',
      onConfirm: () => {
        // 执行删除操作
        console.log('执行删除操作');
        dialog.close();
        alert('删除成功');
      },
      onCancel: () => {
        console.log('取消删除');
        dialog.close();
      }
    });
    dialog.open();
  }
</script>

加载 SanoUI 组件中...

场景 2：表单弹窗

在对话框中嵌入表单，用于编辑数据。

html

<button class="sa-button sa-button--primary" data-icon="edit" onclick="openEditDialog()">
  编辑用户
</button>

<script>
  SA.init('body');
  
  function openEditDialog() {
    const formHTML = `
      <form class="sa-form" id="edit-form" style="max-width: 100%;" data-label-position="right" data-label-width="80px">
        <div class="sa-form-item">
          <label class="sa-form-item__label">姓名</label>
          <div class="sa-form-item__content">
            <div class="sa-input" 
                 data-prop="name"
                 data-placeholder="请输入姓名"
                 data-value="张三"
                 style="width: 100%;"></div>
          </div>
        </div>
        <div class="sa-form-item">
          <label class="sa-form-item__label">邮箱</label>
          <div class="sa-form-item__content">
            <div class="sa-input" 
                 data-prop="email"
                 data-placeholder="请输入邮箱"
                 data-type="email"
                 data-value="zhangsan@example.com"
                 style="width: 100%;"></div>
          </div>
        </div>
      </form>
    `;
    
    const dialog = new SaDialog({
      title: '编辑用户',
      content: formHTML,
      width: '500px',
      confirmText: '保存',
      cancelText: '取消',
      onConfirm: async () => {
        // 初始化表单
        SA.init(dialog.dialog);
        await new Promise(resolve => setTimeout(resolve, 100));
        
        const form = new SaForm('#edit-form', {
          rules: {
            name: [{ required: true, message: '姓名不能为空' }],
            email: [
              { required: true, message: '邮箱不能为空' },
              { type: 'email', message: '请输入正确的邮箱格式' }
            ]
          }
        });
        
        try {
          const formData = await form.validate();
          console.log('保存数据:', formData);
          alert('保存成功！');
          dialog.close();
        } catch (errors) {
          console.log('验证失败:', errors);
          // 验证失败时不关闭对话框
          return false;
        }
      }
    });
    
    dialog.open();
  }
</script>

加载 SanoUI 组件中...

场景 3：使用静态方法

使用 SaDialog.confirm() 和 SaDialog.alert() 静态方法，更简洁的 API。

html

<button class="sa-button sa-button--primary" onclick="handleConfirm()">确认操作</button>
<button class="sa-button sa-button--success" onclick="handleAlert()" style="margin-left: 0.5rem;">提示信息</button>

<script>
  SA.init('body');
  
  async function handleConfirm() {
    try {
      await SaDialog.confirm({
        title: '确认操作',
        content: '确定要执行此操作吗？',
        icon: 'question-filled'
      });
      // 用户点击了确认
      alert('操作已确认');
    } catch {
      // 用户点击了取消
      console.log('操作已取消');
    }
  }
  
  async function handleAlert() {
    await SaDialog.alert({
      title: '提示',
      content: '操作成功！',
      icon: 'success-filled'
    });
    console.log('对话框已关闭');
  }
</script>

加载 SanoUI 组件中...

场景 4：自定义内容对话框

在对话框中显示复杂内容，如图片、列表等。

html

<button class="sa-button sa-button--primary" onclick="openCustomDialog()">
  查看详情
</button>

<script>
  SA.init('body');
  
  function openCustomDialog() {
    const customContent = `
      <div style="padding: 1rem;">
        <h3 style="margin-top: 0;">用户信息</h3>
        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
          <div style="width: 80px; height: 80px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
            头像
          </div>
          <div>
            <p style="margin: 0.5rem 0;"><strong>姓名：</strong>张三</p>
            <p style="margin: 0.5rem 0;"><strong>邮箱：</strong>zhangsan@example.com</p>
            <p style="margin: 0.5rem 0;"><strong>角色：</strong>管理员</p>
          </div>
        </div>
        <div style="border-top: 1px solid #eee; padding-top: 1rem;">
          <h4 style="margin-top: 0;">权限列表</h4>
          <ul style="margin: 0; padding-left: 1.5rem;">
            <li>用户管理</li>
            <li>角色管理</li>
            <li>系统设置</li>
          </ul>
        </div>
      </div>
    `;
    
    const dialog = new SaDialog({
      title: '用户详情',
      content: customContent,
      width: '600px',
      showCancel: false,
      confirmText: '关闭',
      onConfirm: () => {
        dialog.close();
      }
    });
    
    dialog.open();
  }
</script>

加载 SanoUI 组件中...

场景 5：链式确认对话框

多个连续确认对话框，用于重要操作的二次确认。

html

<button class="sa-button sa-button--danger" onclick="handleCriticalDelete()">
  删除重要数据
</button>

<script>
  SA.init('body');
  
  async function handleCriticalDelete() {
    try {
      // 第一次确认
      await SaDialog.confirm({
        title: '确认删除',
        content: '确定要删除这条数据吗？',
        icon: 'warning-filled'
      });
      
      // 第二次确认（更严格的确认）
      await SaDialog.confirm({
        title: '再次确认',
        content: '此操作不可恢复，请再次确认删除！',
        icon: 'warning-filled',
        confirmText: '我确定删除',
        cancelText: '取消'
      });
      
      // 执行删除
      alert('数据已删除');
    } catch {
      console.log('操作已取消');
    }
  }
</script>

加载 SanoUI 组件中...

注意事项

对话框栈：支持多个对话框叠加，ESC 键只关闭最顶层的对话框
自动关闭：点击遮罩层或按 ESC 键可以关闭对话框
内容更新：可以通过 setContent() 方法动态更新对话框内容
生命周期：对话框关闭时会触发 onClose 回调
静态方法：SaDialog.confirm() 和 SaDialog.alert() 返回 Promise，便于使用 async/await

常见问题

Q: 如何阻止对话框关闭？

A: 在 onConfirm 回调中返回 false：

javascript

const dialog = new SaDialog({
  onConfirm: () => {
    // 验证失败时返回 false，阻止关闭
    if (!isValid) {
      return false;
    }
    dialog.close();
  }
});

Q: 如何动态更新对话框内容？

A: 使用 setContent() 方法：

javascript

dialog.setContent('新的内容');

Q: 如何实现对话框的拖拽？

A: Dialog 组件默认支持拖拽，点击标题栏即可拖动。

Q: 如何实现对话框的最大化？

A: 设置 maximizable: true：

javascript

const dialog = new SaDialog({
  maximizable: true,
  // ...
});

Q: 如何在对话框中嵌入表单？

A: 在 content 中传入表单 HTML，然后在 onConfirm 中初始化表单：

javascript

const dialog = new SaDialog({
  content: '<form id="my-form">...</form>',
  onConfirm: () => {
    SA.init(dialog.dialog);
    const form = new SaForm('#my-form');
    // ...
  }
});

Q: 如何使用 iframe 对话框？

A: 使用 SaIframeModal 或 SaDialog.open() 静态方法：

javascript

// 方式 1：使用 SaIframeModal
const modal = new SaIframeModal({
  title: '页面预览',
  url: 'https://example.com',
  width: '800px',
  height: '600px',
  resizable: true,
  maximizable: true
});

// 方式 2：使用静态方法
const modal = SaDialog.open({
  title: '页面预览',
  url: 'https://example.com',
  width: '800px',
  height: '600px'
});

SaIframeModal - iframe 对话框

SaIframeModal 是用于在对话框中显示 iframe 内容的组件。

基础用法

javascript

const modal = new SaIframeModal({
  title: '页面预览',
  url: 'https://example.com',
  width: '800px',
  height: '600px'
});

配置选项

参数	说明	类型	默认值
title	标题	`string`	`'页面预览'`
url	iframe 地址	`string`	-
width	对话框宽度	`string`	`'min(90vw, 960px)'`
height	对话框高度	`string`	`'clamp(360px, 70vh, 720px)'`
resizable	是否可调整大小	`boolean`	`true`
maximizable	是否可最大化	`boolean`	`true`
closable	是否显示关闭按钮	`boolean`	`true`
onClose	关闭回调	`function()`	-
onLoad	iframe 加载完成回调	`function()`	-

方法

方法名	说明	参数	返回值
maximize	最大化对话框	-	`void`
restore	恢复对话框大小	-	`void`
toggleMaximize	切换最大化状态	-	`void`
close	关闭对话框	-	`void`

使用示例

html

<button class="sa-button sa-button--primary" onclick="openIframeModal()">
  打开页面预览
</button>

<script>
  SA.init('body');
  
  function openIframeModal() {
    const modal = new SaIframeModal({
      title: '页面预览',
      url: 'https://example.com',
      width: '900px',
      height: '600px',
      resizable: true,
      maximizable: true,
      onLoad: () => {
        console.log('页面加载完成');
      },
      onClose: () => {
        console.log('对话框已关闭');
      }
    });
  }
</script>

加载 SanoUI 组件中...

Dialog 对话框 ​

基础用法 ​

自定义按钮 ​

自定义内容 ​

无标题对话框 ​

API ​

构造函数参数 ​

配置选项 ​

方法 ​

静态方法 ​

示例代码 ​

手动创建实例 ​

使用静态方法 ​

实际使用场景 ​

场景 1：确认删除对话框 ​

场景 2：表单弹窗 ​

场景 3：使用静态方法 ​

场景 4：自定义内容对话框 ​

场景 5：链式确认对话框 ​

注意事项 ​

常见问题 ​

Q: 如何阻止对话框关闭？ ​

Q: 如何动态更新对话框内容？ ​

Q: 如何实现对话框的拖拽？ ​

Q: 如何实现对话框的最大化？ ​

Q: 如何在对话框中嵌入表单？ ​

Q: 如何使用 iframe 对话框？ ​

SaIframeModal - iframe 对话框 ​

基础用法 ​

配置选项 ​

方法 ​

使用示例 ​

Dialog 对话框

基础用法

自定义按钮

自定义内容

无标题对话框

API

构造函数参数

配置选项

方法

静态方法

示例代码

手动创建实例

使用静态方法

实际使用场景

场景 1：确认删除对话框

场景 2：表单弹窗

场景 3：使用静态方法

场景 4：自定义内容对话框

场景 5：链式确认对话框

注意事项

常见问题

Q: 如何阻止对话框关闭？

Q: 如何动态更新对话框内容？

Q: 如何实现对话框的拖拽？

Q: 如何实现对话框的最大化？

Q: 如何在对话框中嵌入表单？

Q: 如何使用 iframe 对话框？

SaIframeModal - iframe 对话框

基础用法

配置选项

方法

使用示例