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

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

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

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

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

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

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

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

Dialog API

安装

// quasar.config.js

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

内置组件

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

// 在Vue文件内
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  $q.dialog({ ... }) // returns Object
}

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

用法

原生属性

你也可以为内部的QInput或QOptionGroup组件提供原生HTML属性，就像下面的例子。

用户输入验证

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

进度条

使用HTML

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

调用自定义组件

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

这个功能实际上是对话框插件的“面包和黄油”。它通过分离和重复使用对话框的功能，帮助你保持其他vue组件html模板的清洁。

import { useQuasar } from 'quasar'
import CustomComponent from '..path.to.component..'

setup () {
  const $q = useQuasar()

  $q.dialog({
    component: CustomComponent,

    // 转发到你的自定义组件的属性
    componentProps: {
      text: 'something',
      // ...更多..属性...
    }
  }).onOk(() => {
    console.log('OK')
  }).onCancel(() => {
    console.log('Cancel')
  }).onDismiss(() => {
    console.log('Called on OK or Cancel')
  })
}

与上述等效的Options API的方法是直接使用this.$q.dialog({ ... })。

带有脚本设置（和Composition API）变体的SFC

我们将使用useDialogPluginComponent composable.

<template>
  <q-dialog ref="dialogRef" @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="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'

const props = defineProps({
  // ...您的定制属性
})

defineEmits([
  // 必需；需要指定一些事件
  //（组件将通过useDialogPluginComponent()发出）
  ...useDialogPluginComponent.emits
])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
// dialogRef - 应用于QDialog的Vue引用。
// onDialogHide - 用作QDialog上@hide的处理函数。
// onDialogOK - 调用函数来处理结果为"确定"的对话框。
//              例子: onDialogOK() - 没有有效载荷
//              例子: onDialogOK({ /*...*/ }) -- 有有效载荷
// onDialogCancel - 调用函数来处理结果为"取消"的对话框。

// 这是我们例子的一部分（所以不是必须的）。
function onOKClick () {
  // 在"确定"时，它必须要 
  // 调用onDialogOK（带可选的有效载荷）。
  onDialogOK()
  // 或使用有效载荷：onDialogOK({ ... })    
  // ...它还会自动隐藏对话框
}
</script>

如果你想以对象形式定义`emits’，那么（需要Quasar v2.2.5+）：

defineEmits({
  // 必需；需要指定一些事件
  //（组件将通过useDialogPluginComponent()发出）
  ...useDialogPluginComponent.emitsObject,

  // ...你自己的定义
})

Composition API variant

We will be using the useDialogPluginComponent composable.

<template>
  <!-- 请注意这里的dialogRef -->
  <q-dialog ref="dialogRef" @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>
import { useDialogPluginComponent } from 'quasar'

export default {
  props: {
    // ...您的定制属性
  },

  emits: [
    // 必需的；需要指定一些事件，
    // 你的组件将通过useDialogPluginComponent()发出这些事件。
    ...useDialogPluginComponent.emits
  ],

  setup () {
    // 必需的；必须在setup()中调用。
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
    // dialogRef - 应用于QDialog的Vue引用。
    // onDialogHide - 用作QDialog上@hide的处理函数。
    // onDialogOK - 调用函数来处理结果为"确定"的对话框。
    //              例子: onDialogOK() - 没有有效载荷
    //              例子: onDialogOK({ /*...*/ }) -- 有有效载荷
    // onDialogCancel - 调用函数来处理结果为"取消"的对话框。

    return {
      // 这是必须的；
      // 需要将这些（从useDialogPluginComponent()调用）注入vue范围，
      // 用于vue html模板。
      dialogRef,
      onDialogHide,

      // 我们在vue html模板中使用的其他方法。
      // 这些是我们例子的一部分（所以不是必须的）。
      onOKClick () {
        // 在“确定”时，它必须要
        // 调用onDialogOK（带可选的有效载荷）。
        onDialogOK()
        // 或者使用有效载荷：onDialogOK({ ... })
        // ...它也会自动隐藏对话框。
      },

      // 我们可以直接通过onDialogCancel函数来处理
      onCancelClick: onDialogCancel
    }
  }
}
</script>

如果你想以对象形式定义`emits’，那么（需要Quasar v2.2.5+）：

emits: {
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emitsObject,

  // ...your own definitions
}

选项API变体

<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: {
    // ...你自定义的属性
  },

  emits: [
    // 必需的
    'ok', 'hide'
  ],

  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.config.js文件:

// quasar.config.js;
// 仅为Cordova:
return {
  framework: {
    config: {
      cordova: {
        // Quasar处理手机后退按钮的应用退出。
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另一方面，以下内容完全 
        // 禁用Quasar的返回按钮管理。
        backButton: true/false
      }
    }
  }
}

// quasar.config.js;
// 仅为Capacitor
return {
  framework: {
    config: {
      capacitor: {
        // Quasar处理手机后退按钮的应用退出。
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另一方面，以下内容完全 
        // 禁用Quasar的返回按钮管理。
        backButton: true/false
      }
    }
  }
}