QDialog 组件能够让用户选择特定操作或操作列表。它们还可以向用户提供重要信息，或要求他们做出一个或多个决定。
¥The QDialog component is a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).
从 UI 的角度来看，你可以将对话框视为一种浮动模式，它只覆盖屏幕的一部分。这意味着对话框应该仅用于快速用户操作，例如验证密码、获取简短的应用通知或快速选择一个或多个选项。
¥From a UI perspective, you can think of Dialogs as a type of floating modal, which covers only a portion of the screen. This means Dialogs should only be used for quick user actions, like verifying a password, getting a short App notification or selecting an option or options quickly.
提示
对话框也可以用作更基本的全局方法，例如原生 JS 的 alert()、prompt() 等。对于后者，请转到 对话框插件 页面。
¥Dialogs can also be used as a globally available method for more basic use cases, like the native JS alert(), prompt(), etc. For the latter behaviour, go to Dialog Plugin page.
大师班小贴士
与其用 QDialogs 弄乱你的 .vue 模板，不如为你的对话框编写一个组件，并使用 对话框插件 在应用的任何位置调用它。
¥Rather than cluttering your .vue templates with QDialogs, it’s best if you write a component for your dialog and use the Dialog Plugin to invoke it from anywhere in your app.
用法(Usage)
¥Usage
注意
最好将 QDialog 的主要内容设置为 QCard。但是，如果你计划使用任何其他组件（例如 QForm）或标签，请确保 QDialog 的直接子元素使用 <div> 标签渲染（或者你自己用一个标签封装它）。
¥It’s best that your QDialog main content is a QCard. However, if you are planning on using any other component (like QForm) or tag, make sure that the direct child of QDialog is rendered with a <div> tag (or wrap it with one yourself).
基本(Basic)
¥Basic
样式(Styling)
¥Styling
定位(Positioning)
¥Positioning
提示
不要将 “position” 属性与显示/隐藏动画混淆。如果你需要自定义动画，则应使用 transition-show 和 transition-hide，无论 “position” 还是 “maximized” 都可以应用它们。
¥Do not mistake “position” prop with the show/hide animation. If you want a custom animation, you should use transition-show and transition-hide which can be applied regardless of “position” or “maximized”.
各种内容(Various content)
¥Various content
对话框可以包含任何内容。一些示例：
¥Dialogs can contain any content. Some examples:
提示
如果你要使用容器化的 QLayout，则需要为 QDialog 设置宽度（如果使用左右位置）或高度（如果使用上下位置）。你可以使用 vw 和 vh 单位。
¥If you are going to use the containerized QLayout, you’ll need to put a width on your QDialog, if using left/right position, or a height, if using top/bottom position. You can use vw and vh units.
处理滚动(Handling scroll)
¥Handling scroll
不同模式(Different modes)
¥Different modes
用户无法通过按 ESCAPE 键或点击/轻触其背景来关闭对话框。
¥User cannot dismiss the Dialog by pressing ESCAPE key or by clicking/tapping on its backdrop.
对话框也可以成为页面的一部分，无需立即获得焦点。这就是 “seamless” 模式发挥作用的地方：
¥Dialogs can also be a part of the page, without requiring immediate focus. It’s where “seamless” mode comes into play:
对话框中的对话框(Dialog in dialog)
¥Dialog in dialog
你可以在其他对话框之上打开对话框，并且对话框的深度不受限制。级别。
¥You are able to open dialogs on top of other dialogs, with infinite number of depth levels.
尺寸(Sizing)
¥Sizing
你可以自定义对话框的大小。请注意，我们要么篡改内容样式，要么使用 full-width 或 full-height 属性：
¥You are able to customize the size of the Dialogs. Notice we either tamper with the content’s style or we use full-width or full-height props:
Cordova/Capacitor 返回按钮(Cordova/Capacitor back button)
¥Cordova/Capacitor back button
Quasar 默认会为你处理返回按钮，因此它可以隐藏所有打开的对话框，而不是像默认行为那样返回上一页（这不是一个好的用户体验）。
¥Quasar handles the back button for you by default so it can hide any opened Dialogs instead of the default behavior which is to return to the previous page (which is not a nice user experience).
但是，如果你希望禁用此行为，请编辑你的 /quasar.config 文件：
¥However, should you wish to disable this behavior, edit your /quasar.config file:
// quasar.config file
return {
framework: {
config: {
capacitor: {
// Quasar handles app exit on mobile phone back button.
backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],
// On the other hand, the following completely
// disables Quasar's back button management.
backButton: true/false
}
}
}
}