对话框

QDialog 组件非常适合用来让用户选择某个操作或一组操作，也可以用来向用户展示重要信息，或者要求用户做出一个（或多个）决定。

从 UI 的角度来看，对话框可以理解为一种浮动的模态窗口，它只覆盖屏幕的一部分区域。因此，对话框应该只用于快速的用户交互场景，比如验证密码、显示简短的通知、或者快速选择某个选项。

用法

基础

样式

定位

多样化内容

对话框可以包含任意内容，以下是一些示例：

处理滚动

不同模式

用户无法通过按 ESCAPE 键或点击/触摸背景遮罩来关闭对话框。

对话框也可以作为页面的一部分存在，而不需要立即获取焦点。这就是"无缝"模式的用武之地：

嵌套对话框

你可以在对话框之上再打开对话框，支持无限层级的嵌套。

尺寸调整

你可以自定义对话框的尺寸。注意，我们可以通过修改内容的样式，或者使用 full-width、full-height 属性来实现：

Cordova/Capacitor 返回按钮

Quasar 默认会帮你处理返回按钮的行为——按下返回键时会关闭已打开的对话框，而不是执行默认的返回上一页操作（那样的用户体验并不好）。

不过，如果你想禁用这个行为，可以编辑 /quasar.config 文件：

// quasar.config file
return {
  framework: {
    config: {
      capacitor: {
        // Quasar 处理手机返回按钮的退出行为
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另外，以下配置可以完全禁用
        // Quasar 对返回按钮的管理
        backButton: true/false
      }
    }
  }
}

无障碍访问

v2.25+

QDialog 遵循 WAI-ARIA 对话框模式：弹出层渲染时带有 role="dialog" 和受管理的 aria-modal 属性——当对话框有遮罩时为 "true"，而 seamless（无缝）对话框（不阻挡页面其余部分）保留 dialog role 但声明 aria-modal="false"。

焦点会被自动管理。打开时，焦点移入对话框内——移到第一个带有 autofocus（或 data-autofocus）属性的元素上，如果没有则移到对话框主体本身。当对话框是模态的，焦点如果偏离到外部会被重新捕获回来，关闭时焦点返回到打开对话框的元素。no-focus、no-refocus 和 allow-focus-outside 属性分别可以关闭这些行为，以便你自行管理焦点。Escape 键关闭对话框——persistent（持久性）对话框则以"抖动"动画响应。