description: |
  Action Sheet是由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。
  - 高亮危险操作。将危险操作用红色标注，为他们提供其它替代的安全选项。
  - 提供清晰准确的描述。在页面有多个唤起Action Sheet的对象或选项本身不够明晰的情况下，提供清晰准确的描述是非常有必要的。
  - 不要放置过多选项以至于需要滚动才能看完全部选项。
category:
  en: Feedback
  zh-CN: 弹窗提示
icon: ''
tags:
  en:
    - actionsheet
    - dialog
    - action sheet
    - choose
  zh-CN:
    - 操作表
    - 提示
after_extra:
    en: |

      From `v2.1.0`, `menus` supports type: Array.

      `label`: label name，you can use simple text or `html`

      `value`: event name，if not specified, no `on-click-menu` will be emitted

      `type`:

        - `primary` primary color
        - `warn` warn color
        - `disabled` gray color, the menu cannot be clicked
        - `info ` the menu item shows as a tip, the same function as `key.noop` when setting menus by `Object`.

      ``` js
      [{
        label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
        type: 'info'
      }, {
        label: 'Primary',
        type: 'primary',
        value: 'primary'
      }, {
        label: 'Warn',
        type: 'warn'
      }, {
        label: 'Disabled',
        type: 'disabled'
      }, {
        label: 'Default'
      }]
      ```

    zh-CN: |

      从`v2.1.0`开始支持数组类型的菜单。

      `label`: 菜单名字，支持文字及`html`。

      `value`: 英文字符，表示触发事件的名字，如果不设置不会触发`on-click-menu`事件。

      `type`: 类型，可选值如下

        - `primary` 主色
        - `warn` 警告色
        - `disabled` 不可操作，灰色。点击时不会关闭
        - `info ` 信息提示，点击时不会关闭。作用同对象类型的`key.noop`。

      ``` js
      [{
        label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
        type: 'info'
      }, {
        label: 'Primary',
        type: 'primary',
        value: 'primary'
      }, {
        label: 'Warn',
        type: 'warn'
      }, {
        label: 'Disabled',
        type: 'disabled'
      }, {
        label: 'Default'
      }]
      ```
props:
  value:
    type: Boolean
    default: false
    en: if showing the component; use v-model for binding
    zh-CN: 是否显示, 使用 v-model 绑定变量
  show-cancel:
    type: Boolean
    default: false
    en: if showing the cancel menu; invalid for android theme
    zh-CN: 是否显示取消菜单，对安卓风格无效
  cancel-text:
    type: String
    default: 'cancel(取消)'
    en: text of cancel menu
    zh-CN: 取消菜单的显示文字
  theme:
    type: String
    default: 'ios'
    en: "theme of menus, can be in ['ios', 'android']"
    zh-CN: "菜单风格，可选值为['ios','android']"
  menus:
    type: Object,Array
    default: '{}'
    en: "menu items, for example: `{menu1: 'some text'}`, menu name with `.noop` will not trigger click events. <br>`Menus` supports array since `v2.1.0`. Keys can be customized. More details below."
    zh-CN: "菜单项列表，举例：`{menu1: '删除'}`，如果名字上带有`.noop`表明这是纯文本(HTML)展示，不会触发事件，用于展示描述或者提醒。<br>从`v2.1.0`开始支持数组类型的菜单，可自定义键值，见下面说明。"
  close-on-clicking-mask:
    type: Boolean
    default: true
    version: v2.0.0
    en: if closing actionsheet when clicking on mask
    zh-CN: 点击遮罩时是否关闭菜单，适用于一些进入页面时需要强制选择的场景。
  close-on-clicking-menu:
    type: Boolean
    default: true
    version: v2.3.8
    en: if hide automatically when clicking on menus
    zh-CN: 点击菜单时是否自动隐藏
slots:
  header:
    version: v2.3.5
    en: header
    zh-CN: 头部位置
events:
  on-click-menu:
    params: (menuKey, menuItem)
    en: fires when clicking on the menu
    zh-CN: 点击菜单时触发
  on-click-menu-{menuKey}:
    params: (menuKey)
    en: shortcut event for easier listening, `menuKey` is related to `label`. For exapmple, you can listen on `on-click-menu-delete` if you have a menu named `delete`
    zh-CN: 点击事件的快捷方式, `menuKey`与`label`的值有关。举例：如果你有一个菜单名字为`delete`, 那么你可以监听 `on-click-menu-delete`
  on-click-menu-cancel:
    en: fires when clicking on the cancel menu
    zh-CN: 点击取消菜单时触发
  on-click-mask:
    version: v2.3.4
    en: fires when clicking on mask
    zh-CN: 点击遮罩时触发
  on-after-show:
    version: v2.9.0
    en: fires when show transition ends
    zh-CN: 显示动画结束时触发
  on-after-hide:
    version: v2.9.0
    en: fires when hide transition ends
    zh-CN: 隐藏动画结束时触发
changes:
  v2.9.0:
    en:
      - '[feature] add event:on-after-show event:on-after-hide #2465'
    zh-CN:
      - '[feature] 支持 事件 on-after-show on-after-hide #2465'
  v2.7.4:
    en:
      - '[fix] fix wrong event param when value is zero #2209'
    zh-CN:
      - '[fix] 修复值为 0 时事件参数为空的问题 #2209'
  v2.5.6:
    en:
      - '[fix] Fix json parsing issue for cancel menu #1782'
    zh-CN:
      - '[fix] 修复取消菜单上的 json 解析错误 #1782'
  v2.5.5:
    en:
      - '[feature] Add raw menu item for on-click-menu event #1772'
    zh-CN:
      - '[feature] 支持在 on-click-menu 参数里附带原始 menu 对象 #1772'
  v2.3.5:
    en:
      - '[feature] Support slot:header #1381'
    zh-CN:
      - '[feature] 支持 slot:header #1381'
  v2.3.4:
    en:
      - '[feature] Support event: on-click-mask #1496'
    zh-CN:
      - '[feature] 支持遮罩点击事件 on-click-mask #1496'
  v2.2.0:
    en:
      - '[enhance] Donot update handel z-index in Safari when using v-transfer-dom'
    zh-CN:
      - '[enhance] 在使用 v-transfer-dom 的情况下不再处理 Safari 下的 z-index 问题'
  v2.1.1-rc.11:
    en:
      - '[enhance] Better transition for mask'
    zh-CN:
      - '[enhance] 更加流畅的遮罩层动画'
  v2.1.0:
    en:
      - '[feature] support array type of menu #950 @wuchuguang'
    zh-CN:
      - '[feature] 支持数组定义菜单 #950 @wuchuguang'
  v2.0.0:
    en:
      - '[change] upgrade to vue@2.0, use `v-model` instead of `:show.sync`'
      - '[feature] add prop close-on-clicking-mask'
    zh-CN:
      - '[change] 更新到 vue@2.0，使用 `v-model` 而不是`:show.sync`进行显示属性绑定'
      - '[feature] 添加属性 `close-on-clicking-mask`, 适用于强制选择的场景'