对话框插件

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

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

TIP

对话框也可以用作Vue文件模板中的组件(适用于复杂的用例,例如特定表单组件、可选选项等)。 为此,请转到QDialog页面。

作为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卡以查看返回的对象是什么。

用法

TIP

对于以下所有示例,在查实它们时还请参见浏览器控制台。

WARNING

这不是作为Quasar插件使用对话框的功能详尽列表。 要进一步探索,请查看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({ ... })

WARNING

但是,您的自定义组件必须遵循以下描述的接口,才能完美地插入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
      }
    }
  }
}