对话框
QDialog 组件提供了一种很棒的交互方式，您可以通过对话框来向用户展示重要信息，或者请求用户做出决策。
从 UI 的角度来看，您可以把对话框看作一种浮动的模态框，它只覆盖屏幕的一部分，也代表着对话框应该只被用于处理用户的快速操作,例如验证密码，简短的应用通知，或者做出快速选择等等。
TIP
对话框还可以通过更基础的方式来使用，把它当作一个全局的方法来调用，就像原生 js 的 alert(), prompt() 等方法一样。更多信息，请参考 Dialog 插件页面
进阶提示
与其将 QDialog 杂揉在您的 .vue 文件的模板中，不如为对话框写一个组件，并用 Dialog 插件使它可以在应用的任何地方都可以被很方便的调用。
QDialog API
用法
注意
QDialog 最好使用 QCard 作为主要内容。如果您想使用其他的组件或者标签，请确保 QDialog 的直接子元素是 <div> 标签（或者手动为他包裹一个 <div>）。
基础
样式
定位
TIP
不要将 “position” 属性与显示隐藏的动画相混淆。如果您想自定义动画，您可以使用 transition-show 和 transition-hide 属性，不管 “position” 或 “maximized” 如何设置，它们都会生效。
不同的内容
对话框可以包含任何内容。一些示例：
TIP
当您想使用容器化的 QLayout 时，如果使用左/右定位，则需要为 QDialog 设置一个宽度，如果使用上/下定位。则需要为 QDialog 设置一个高度。您可以使用 vw 和 vh 单位。
处理滚动
不同的模式
用户无法通过 ESCAPE 键或者点击对话框外部来关闭对话框。
对话框也可以成为页面的一部分，不需要立即聚焦，这就是“无缝”（seamless）模式的作用:
嵌套
您可以在其他对话框之上打开对话框，没有深度限制。
大小
您可以自定义对话框的大小。请注意，我们要么修改内容的样式，要么使用full-width 或 full-height 属性：
Cordova/Capacitor 返回按钮
Quasar 默认为您处理返回按钮，所以它会关闭任何打开的对话框，而不是默认返回到前一页(这不是一个很好的用户体验)。
但是，如果您希望禁用此行为，请编辑/quasar.config。js 文件：
// quasar.config.js;
// for Cordova (only!):
return {
framework: {
config: {
cordova: {
// quasar 处理手机返回键使应用程序退出。
backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],
// 下面这个配置开启会完全禁用 quasar 管理手机的返回按钮。
backButton: true/false
}
}
}
}
// quasar.config.js;
// for Capacitor (only!)
return {
framework: {
config: {
capacitor: {
// quasar 处理手机返回键使应用程序退出。
backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],
// 下面这个配置开启会完全禁用 quasar 管理手机的返回按钮。
backButton: true/false
}
}
}
}
类型定义
查看类型定义
type InputType =
| "button"
| "checkbox"
| "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "hidden"
| "image"
| "month"
| "number"
| "password"
| "radio"
| "range"
| "reset"
| "search"
| "submit"
| "tel"
| "text"
| "time"
| "url"
| "week";
type DatalessInputType = Extract<InputType, "submit" | "reset">;
type PromptInputType = "textarea" | Exclude<InputType, DatalessInputType>;
type DataAttributes = {
[dataAttributes in `data-${string}`]?: any;
} & {
"data-cy"?: string;
};
export type QDialogInputPrompt<T = string> = {
/**
* The initial value of the input
*/
model: T;
/**
* Optional property to determine the input field type
*
* @defaultValue "text"
*/
type?: PromptInputType;
/**
* Is typed content valid?
*
* @param val The value of the input
* @returns The text passed validation or not
*/
isValid?: (value: T) => boolean;
} & Partial<Omit<QInputProps, "modelValue" | "onUpdate:modelValue" | "type">> &
Omit<InputHTMLAttributes, "type"> &
DataAttributes;
type SelectionPromptType = NonNullable<QOptionGroupProps["type"]>;
export type QDialogSelectionPrompt<
TType extends SelectionPromptType = SelectionPromptType,
TModel = TType extends "radio" ? string : readonly any[],
> = {
/**
* The value of the selection
* If the `type` is "radio"(default), the value is a string, otherwise it's an array
*/
model: TModel;
/**
* The type of the selection
*
* @defaultValue "radio"
*/
type?: TType;
/**
* The list of options to interact with
* Equivalent to `options` prop of the `QOptionGroup` component
*/
items?: QOptionGroupProps["options"];
/**
* Is the model valid?
*
* @param model The current model (If the `type` is "radio"(default), the value is a string, otherwise it's an array)
* @returns The selection passed validation or not
*/
isValid?: (value: TModel) => boolean;
} & Partial<
Omit<
QOptionGroupProps,
"modelValue" | "onUpdate:modelValue" | "type" | "options"
>
> &
HTMLAttributes &
DataAttributes;