操作表(ActionSheet)

操作表(ActionSheet)从设备屏幕的底部边缘向上滑动,并显示一组选项,可以确认或取消操作。 操作表有时可以用作菜单的替代,但是,它们不应该用于导航。

操作表总是出现在页面上的任何其他组件之上,并且必须被取消才能与底层内容交互。 当它被触发时,页面的其余部分会变暗以给予操作表选项更多的焦点。

操作表可以显示为列表或网格,包含图标或头像。 它们既可以用作Vue文件模板中的组件,也可以用作全局可用的方法。

作为方法的基本用法

首先,我们安装它:

编辑/quasar.conf.js

framework: {
plugins: ['ActionSheet']
}

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

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

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

配置对象的基本语法:

this.$q.actionSheet({
title: 'Article Actions',

// 如果您仅想要网格模式,则指定
grid: true,

// 可选的; 更改取消标签(仅适用于iOS主题)
dismissLabel: 'Quit',

actions: [
{
label: 'Delete',

// 可选的
color: 'negative',

// 选择以下两项之一:
icon: 'delete', // 如果您仅想使用图标,则指定
avatar: 'assets/some-avatar.png', // 如果您仅想使用头像,则指定

// 可选的; 用户选择此操作时要做什么;
      // 也可以使用返回的Promise进行处理
      // 并从“action”参数中识别操作
handler () {
console.log('Deleted Article')
}
},

{}, // 可选的分隔

...
]
})

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

处理结果

创建ActionSheet时返回的对象是一个Promise,所以你可以利用Promise API来处理结果:

this.$q.actionSheet({...})
.then(action => {
// 用户选择一个操作

console.log(action)
// { label: 'Joe', ... }
})
.catch(() => {
// 用户取消操作表
})

// 或者使用async/await:
async showActionSheet () {
try {
const action = await this.$q.actionSheet({...})

// 用户在这一点上选择了一个操作
console.log(action)
// { label: 'Joe', ... }
}
catch () {
// 用户取消操作表
}
}

作为组件的基本用法

首先,我们安装它:

编辑/quasar.conf.js

framework: {
components: ['QActionSheet']
}

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

<template>
<q-action-sheet
v-model="actionSheet"
title="Action Sheet"
@ok="onOk"
@cancel="onCancel"
@show="onShow"
@hide="onHide"
:actions="[
{
label: 'Delete',
icon: 'delete',
color: 'red',
handler: deleteAction
},
{
label: 'Share',
icon: 'share',
color: 'primary'
},

// 可选的分隔
{},

// 继续其他操作
{
label: 'Play',
icon: 'gamepad'
},
{
label: 'Favorite',
icon: 'favorite'
}
]"
/>
<!--
有一个可选的“title”插槽,如果你
    有非常特别的内容想显示在ActionSheet标题里
    (它取代“title”属性)
-->
</template>

<script>
export default {
data () {
// QActionSheet示例的模型
return { actionSheet: false }
},
methods: {
// 其中一个操作的自定义处理程序
deleteAction () {
// @ok事件仍将被触发
this.$q.notify('Deleting...')
},

// 用户选择一个操作
onOk (item) {
if (item.handler) {
// 如果我们已经触发了一个处理程序
return
}
this.$q.notify({
color: 'secondary',
message: `Clicked on "${item.label}"`
})
},

// 用户取消了操作表
onCancel () {
this.$q.notify({
color: 'tertiary',
icon: 'done',
message: 'Action Sheet was dismissed'
})
},

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

// 当它被隐藏时
onHide () { }
}
}
</script>

QActionSheet Vue 属性

Vue属性 类型 必需 说明
actions 对象数组 定义ActionSheet操作
title 字符串 操作表标题。
grid 布尔 使其成为“tag”类型。
dismiss-label 字符串 覆盖默认的i18n“Cancel”标签(仅适用于iOS主题)

QActionSheet Vue 事件

Vue属性 说明
@ok(action) 用户选择了一个操作。
@cancel 用户取消了操作表。
@show 操作表刚刚显示给用户。
@hide 操作表已被隐藏(不管结果如何)。
@escape-key 使用ESCAPE键取消操作表。