操作表(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键取消操作表。
树 对话框