对话框

QDialog组件是提供给用户选择特定操作或操作列表的好方式。 他们还可以向用户提供重要信息,或要求他们作出决定(或多项决定)。

从用户界面的角度来看,你可以将对话视为一种浮动模态框,它只覆盖屏幕的一部分。 这意味着对话框只能用于快速操作,例如验证密码、收到简短的应用通知或快速选择一个或多个选项。

TIP

对话框也可以用作更基本的用例的全局可用方法,例如原生JS alert()、prompt()等。对于后一种行为,请转到对话框插件页面 。

Masterclass TIP

最好是为对话框编写一个组件,并使用对话框插件从应用程序中的任何位置调用它,而不是将.vue模板与QDialogs混杂在一起。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

注意

最好您的QDialog主要内容是QCard。 但是,如果您打算使用任何其他组件(例如QForm)或标签,请确保QDialog的直接子级使用<div>标签渲染(或自己包裹)。

基础

Basic

样式

Styling

定位

Positions

TIP

不要将“position”属性与显示/隐藏动画一起使用。 如果您想要自定义动画,则应使用transition-showtransition-hide,无论“position”还是“maximized”都可以应用。

Maximized

各种内容

对话框可以包含任何内容。一些例子:

Various content
With containerized QLayout

TIP

如果要使用容器化的QLayout,则需要在QDialog上放置一个宽度(如果使用左/右位置),或者一个高度(如果使用顶部/底部位置)。 您可以使用vw和vh单位。

处理滚动

Scrollable dialogs

不同模式

用户无法通过按ESCAPE键或在其背景上单击/轻击来关闭该对话框。

Persistent

对话框也可以成为页面的一部分,而无需立即聚焦。 这是“无缝”模式发挥作用的地方:

Seamless

对话框中的对话框

您可以在无限多个深度级别的其他对话框之上打开对话框。

Inception

大小

您可以自定义对话框的大小。 注意,我们要么篡改内容的样式,要么使用full-widthfull-height属性:

Sizing examples

Cordova/Capacitor后退按钮

Quasar默认为您处理后退按钮,因此它可以隐藏任何打开的对话框,而不是返回到上一页的默认行为(这不是一个好的用户体验)。

但是,如果希望禁用此行为,请编辑/quasar.conf.js文件:

// quasar.conf.js;
// for Cordova (only!):
return {
  framework: {
    config: {
      cordova: {
        // Quasar handles app exit on mobile phone back button.
        // Requires Quasar v1.9.3+ for true/false, v1.12.6+ for '*' wildcard and array values
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // On the other hand, the following completely
        // disables Quasar's back button management.
        // Requires Quasar v1.14.1+
        backButton: true/false
      }
    }
  }
}

// quasar.conf.js;
// for Capacitor (only!)
// and Quasar v1.9.3+:
return {
  framework: {
    config: {
      capacitor: {
        // Quasar handles app exit on mobile phone back button.
        // Requires Quasar v1.9.3+ for true/false, v1.12.6+ for '*' wildcard and array values
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // On the other hand, the following completely
        // disables Quasar's back button management.
        // Requires Quasar v1.14.1+
        backButton: true/false
      }
    }
  }
}

QDialog API

Loading API...
Please wait...