对话框 | Quasar Framework 中文网

对话框

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

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

TIP

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

Masterclass TIP

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

QDialog API

用法

注意

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

基础

样式

定位

TIP

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

各种内容

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

TIP

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

处理滚动

不同模式

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

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

对话框中的对话框

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

大小

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

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
      }
    }
  }
}

阅读更多?