对话框(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键关闭时触发。