对话框(Dialog)

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

从用户界面的角度来看，你可以将对话视为一种“浮动”模态框，它只覆盖屏幕的一部分。 这意味着对话框只能用于快速操作，如密码验证、小应用通知或快速选项。 应该为模态框保留更深入的用户流量。

对话框既可以用作Vue文件模板中的组件（对于复杂的使用情况，例如具有验证等的特定表单组件），也可以用作全局可用的方法（对于一些基本用例，相当于本机JS alert() ，prompt()，…）。

作为方法的基本用法

首先，我们安装它：

编辑 /quasar.conf.js:

framework: {
  plugins: ['Dialog']
}

现在让我们看看我们如何使用它：

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

// 在Vue文件中
(Promise) this.$q.dialog(configObj)

配置对象的基本语法：

this.$q.dialog({
  title: 'Warning',
  message: 'You are about to run out of disk space.',

  // 可选的
  color: 'primary',

  // 可选的; 我们想要一个"OK"按钮
  ok: true, // 采用i18n值，或“OK”按钮标签的字符串

  // optional; 我们想要一个"Cancel"按钮
  cancel: true, // 采用i18n值，或“Cancel”按钮标签的字符串

  // 可选的; 当不单击对话按钮时防止用户关闭
  preventClose: true,

  noBackdropDismiss: false, // 如果preventClose为“true”，则自动设置为“true”
  noEscDismiss: false, //如果preventClose为“true”，则自动设置为“true”

  // 可选的; 垂直堆叠按钮而不是水平（默认）
  stackButtons: true,

  // 可选的; 对话框的位置(top, bottom, left, right)
  position: 'top',

  // 可选的; 显示一个输入框（使对话框类似于JS的提示对话框）
  prompt: {
    model: '',
    type: 'text' // 可选的
  },

  // 可选的; 显示单选框，复选框或切换框
  options: {
    type: 'radio', // 或者'checkbox' / 'toggle'
    model: 'opt2', // 使用数组，当checkbox/toggle时! (like '[]')
    items: [
      {label: 'Option 1', value: 'opt1', color: 'secondary'},
      {label: 'Option 2', value: 'opt2'},
      {label: 'Option 3', value: 'opt3'}
    ]
  }
})

重要
当用户按手机/平板电脑的后退按钮（仅适用于Cordova 应用程序）时，操作表将自动关闭。
另外，在桌面浏览器中，点击<ESCAPE>键也会关闭操作表。

处理结果

创建操作表时返回的对象是一个Promise，所以你可以利用Promise API来处理结果：

this.$q.dialog({...})
  .then(() => {
    // 选择"OK"
  })
  .catch(() => {
    // 选择"Cancel"或作了关闭操作
  })

// 或者使用async/await:
async showActionSheet () {
  try {
    await this.$q.dialog({...})
    // 用户选择"OK"
  }
  catch () {
    // 选择"Cancel"或作了关闭操作
  }
}

例子

警报框

this.$q.dialog({
  title: 'Alert',
  message: 'Modern HTML5 front-end framework on steroids.'
})

确认框

this.$q.dialog({
  title: 'Confirm',
  message: 'Modern HTML5 front-end framework on steroids.',
  ok: 'Agree',
  cancel: 'Disagree'
}).then(() => {
  this.$q.notify('Agreed!')
}).catch(() => {
  this.$q.notify('Disagreed...')
})

提示框

this.$q.dialog({
  title: 'Prompt',
  message: 'Modern front-end framework on steroids.',
  prompt: {
    model: '',
    type: 'text' // 可选的
  },
  cancel: true,
  color: 'secondary'
}).then(data => {
  this.$q.notify(`You typed: "${data}"`)
}).catch(() => {
  this.$q.notify('Ok, no mood for talking, right?')
})

单项选择框

this.$q.dialog({
  title: 'Options',
  message: 'Modern front-end framework on steroids.',
  options: {
    type: 'radio',
    model: 'opt2',
    items: [
      {label: 'Option 1', value: 'opt1', color: 'secondary'},
      {label: 'Option 2', value: 'opt2'},
      {label: 'Option 3', value: 'opt3'}
    ]
  },
  cancel: true,
  preventClose: true,
  color: 'secondary'
}).then(data => {
  this.$q.notify(`You selected: ${data}`)
})

多项选择框

this.$q.dialog({
  title: 'Options',
  message: 'Modern front-end framework on steroids.',
  options: {
    type: 'checkbox',
    model: [],
    items: [
      {label: 'Option 1', value: 'opt1', color: 'secondary'},
      {label: 'Option 2', value: 'opt2'},
      {label: 'Option 3', value: 'opt3'}
    ]
  },
  cancel: true,
  preventClose: true,
  color: 'secondary'
}).then(data => {
  this.$q.notify(`You selected: ${JSON.stringify(data)}`)
})

堆叠的按钮

this.$q.dialog({
  title: 'Stacked buttons',
  message: 'Go to a movie.',
  ok: 'Yes, please!',
  cancel: 'Uhm, nope',
  stackButtons: true
}).then(() => {
  this.$q.notify('Agreed!')
}).catch(() => {
  this.$q.notify('Disagreed...')
})

自定义按钮

this.$q.dialog({
  title: 'Custom buttons',
  message: 'Go to a movie.',
  ok: {
    push: true,
    label: 'Yes, please!'
  },
  cancel: {
    push: true,
    color: 'negative',
    label: 'Uhm, nope'
  }
}).then(() => {
  this.$q.notify('Agreed!')
}).catch(() => {
  this.$q.notify('Disagreed...')
})

防止意外关闭

this.$q.dialog({
  title: 'Prevent close',
  message: 'This dialog cannot be dismissed by clicking/tapping on the background overlay.',
  ok: true,
  cancel: true,
  preventClose: true
}).then(() => {
  this.$q.notify('You said OK!')
}).catch(() => {
  this.$q.notify(`You didn't agree`)
})

作为组件的基本用法

首先，我们安装它：

编辑 /quasar.conf.js:

framework: {
  components: ['QDialog']
}

现在让我们看看我们如何使用它：

<template>
  <q-dialog
    v-model="customDialogModel"
    stack-buttons
    prevent-close
    @ok="onOk"
    @cancel="onCancel"
    @show="onShow"
    @hide="onHide"
  >
    <!-- 这里可能使用<q-dialog>的"title"属性 -->
    <span slot="title">Favorite Superhero</span>

    <!-- 这里可能使用<q-dialog>的"message"属性 -->
    <span slot="message">What is your superhero of choice?</span>

    <div slot="body">
      <q-field
        icon="account_circle"
        helper="We need your name so we can send you to the movies."
        label="Your name"
        :label-width="3"
      >
        <q-input v-model="name" />
      </q-field>
    </div>

    <template slot="buttons" slot-scope="props">
      <q-btn color="primary" label="Choose Superman" @click="choose(props.ok, 'Superman')" />
      <q-btn color="black" label="Choose Batman" @click="choose(props.ok, 'Batman')" />
      <q-btn color="negative" label="Choose Spiderman" @click="choose(props.ok, 'Spiderman')" />
      <q-btn flat label="No thanks" @click="props.cancel" />
    </template>
  </q-dialog>
</template>

<script>
export default {
  data () {
    return {
      // 模型对话框的例子
      customDialogModel: false,

      name: ''
    }
  },
  methods: {
    // 当props.ok()被调用
    onOk (data) { },

    // 当props.cancel()被调用
    onCancel () { },

    // 当我们展示给用户时
    onShow () { },

    // 当它被隐藏时
    onHide () { },

    // 自定义处理程序
    async choose (okFn, hero) {
      if (this.name.length === 0) {
        this.$q.dialog({
          title: 'Please specify your name!',
          message: `Can't buy tickets without knowing your name.`
        })
      }
      else {
        await okFn()
        this.$q.notify(`Ok ${this.name}, going with ${hero}`)
      }
    }
  }
}
</script>

QDialog Vue属性

Vue属性 类型 说明
title 字符串 对话框标题。
message 字符串 对话框消息。
prompt 对象 详情请查看下表。
options 对象 详情请查看下表。
ok 布尔/字符串/对象 我们有一个确定按钮吗？可以指定使用哪个标签或者对象形式的按钮属性。
cancel 布尔/字符串/对象 我们有取消按钮吗？可以指定使用哪个标签或者对象形式的按钮属性。
stack-buttons 布尔 垂直堆叠按钮而不是水平默认。
prevent-close 布尔 只有点击/轻击确定/取消按钮才能解除对话框。
no-esc-dismiss 布尔 “ESC”键不会关闭对话框。如果“prevent-close”为“true”，则将其覆盖为“true”。
no-backdrop-dismiss 布尔 点击/轻击背景幕不会关闭对话框。如果“prevent-close”为“true”，则将其覆盖为“true”。
position 字符串 对话框的位置(top, bottom, left, right)。
color 字符串 来自Quasar调色板的颜色。

提示对象：

{
  model: '..' // 字符串,
  type: 'text' // 可选的
}

选项对象：

{
  type: 'radio', // 或者'checkbox', 'toggle'
  model: 'opt2', // 使用数组，当checkbox / toggle时 (like '[]')
  items: [
    {label: 'Option 1', value: 'opt1', color: 'secondary'},
    {label: 'Option 2', value: 'opt2'},
    {label: 'Option 3', value: 'opt3'}
  ]
}

QDialog Vue事件

Vue属性 说明
@ok 当“props.ok()”被调用时。
@cancel 当“props.cancel()”被调用时。
@show 对话框刚显示给用户时触发。
@hide 对话框已被隐藏（不管结果如何）时触发。
@escape-key 对话框被ESCAPE键关闭时触发。
操作表 模态框