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

从用户界面的角度来看，你可以将对话框视为一种浮动模态框，它只覆盖屏幕的一部分。 这意味着对话框只能用于快速用户操作

作为Quasar插件使用对话框而不是QDialog组件的优点是也可以从Vue空间外部调用该插件而无需您管理它们的模板。 但是结果是，它们的自定义不能与组件的自定义进行比较。

但是，您还可以为Dialog插件提供一个组件以进行渲染（请参见“调用自定义组件”部分），这是一种避免内联对话框使Vue模板混乱的好方法（它还将帮助您更好地组织项目文件并重用对话框）。

使用QDialog插件，您可以以编程方式构建具有以下表单内容的三种类型的对话框：

1. 提示对话框-要求用户在输入字段中填写某种数据。
2. 一组选项供用户使用单选按钮或切换按钮（仅用于单选）或复选框（用于多选）进行选择。
3. 一个简单的确认对话框，用户可以在其中取消或对特定操作或输入给出“确定”。

为了创建#1提示输入表单，您必须在opts对象中具有prompt属性。

为了创建#2选项选择表单，您必须在opts对象中拥有options属性。

Dialog API

安装

// quasar.conf.js

return {
  framework: {
    plugins: [
      'Dialog'
    ]
  }
}

用法

// 在Vue文件外
import { Dialog } from 'quasar'
(Object) Dialog.create({ ... })

// 在Vue文件内
(Object) this.$q.dialog({ ... })

请检查API卡以查看返回的对象是什么。

预定义

基础验证

v1.8+

您可以使用一个基础的验证系统，以便用户无法提交对话框（单击/点击“确定”或按ENTER），直到填写了期望的值。

进度条

v1.13.3+

使用HTML

如果指定html: true属性，则可以在标题和消息上使用HTML。 请注意，这可能会导致XSS攻击，因此请您自己确保消息安全。

调用自定义组件

您还可以调用自己的自定义组件，而不必依赖Dialog插件随附的默认组件。 但是在这种情况下，您将负责处理所有内容（包括您自己的组件属性）。

import CustomComponent from '..path.to.component..'

// ...

this.$q.dialog({
  component: CustomComponent,

  // 如果要访问自定义组件中的
  // 路由管理器、Vuex存储等, 
  // 则为可选：
  parent: this, // 成为该Vue节点的子元素
                // （“this”指向您的Vue组件）
                // （此属性在<1.1.0中称为“root” 
                //  仍然可以使用，但建议切换到
                //  更合适的“parent”名称）

  // 传递给组件的属性
  // （上述“component”和“parent”属性除外）：
  text: 'something',
  // ...更多属性...
}).onOk(() => {
  console.log('OK')
}).onCancel(() => {
  console.log('Cancel')
}).onDismiss(() => {
  console.log('Called on OK or Cancel')
})

<template>
  <q-dialog ref="dialog" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <!--
        ...内容
        ...使用q-card-section展现它?
      -->

      <!-- 按钮示例 -->
      <q-card-actions align="right">
        <q-btn color="primary" label="OK" @click="onOKClick" />
        <q-btn color="primary" label="Cancel" @click="onCancelClick" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  props: {
    // ...你自定义的属性
  },

  methods: {
    // 以下方法是必需的
    // (不要改变它的名称 --> "show")
    show () {
      this.$refs.dialog.show()
    },

    // 以下方法是必需的
    // (不要改变它的名称 --> "hide")
    hide () {
      this.$refs.dialog.hide()
    },

    onDialogHide () {
      // QDialog发出“hide”事件时
      // 需要发出
      this.$emit('hide')
    },

    onOKClick () {
      // 按OK，在隐藏QDialog之前
      // 发出“ok”事件（带有可选的有效负载）
      // 是必需的
      this.$emit('ok')
      // 或带有有效负载：this.$emit('ok', { ... })

      // 然后隐藏对话框
      this.hide()
    },

    onCancelClick () {
      // 我们只需要隐藏对话框
      this.hide()
    }
  }
}
</script>

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