对话框插件

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

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

TIP

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

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

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

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

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

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

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

安装

// quasar.conf.js

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

用法

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

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

预定义

TIP

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

WARNING

这不是作为Quasar插件使用对话框的功能详尽列表。 要进一步探索,请查看API部分。

Basic
Dark mode
Radios, Checkboxes, Toggles
Other options

基础验证

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

Prompt with validation
Options with validation

使用HTML

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

Unsafe HTML message

调用自定义组件

您还可以调用自己的自定义组件,而不必依赖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')
})

WARNING

但是,您的自定义组件必须遵循以下描述的接口,才能完美地插入Dialog插件。 请注意“必需”的注释,并按原样进行操作-仅是一个简单的示例,仅此而已。

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

Dialog API

Loading API...
Please wait...