ActionSheet 动作面板

---

该组件提供了一种多端统一的 动作面板 样式与 IOS 对齐，在页面上的层级为 1010

使用指南

在 Taro 文件中引入组件

import { AtActionSheet, AtActionSheetItem } from "taro-ui"

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/action-sheet.scss";

一般用法

<AtActionSheet isOpened>
  <AtActionSheetItem>
    按钮一
  </AtActionSheetItem>
  <AtActionSheetItem>
    按钮二
  </AtActionSheetItem>
</AtActionSheet>

添加标题和底部取消按钮

<AtActionSheet isOpened cancelText='取消' title='头部标题可以用通过转义字符换行'>
  <AtActionSheetItem>
    按钮一
  </AtActionSheetItem>
  <AtActionSheetItem>
    按钮二
  </AtActionSheetItem>
</AtActionSheet>

添加监听事件

<AtActionSheet isOpened cancelText='取消' title='头部标题可以用通过转义字符换行' onCancel={ this.handleCancel } onClose={ this.handleClose }>
  <AtActionSheetItem onClick={ this.handleClick }>
    按钮一
  </AtActionSheetItem>
  <AtActionSheetItem>
    按钮二
  </AtActionSheetItem>
</AtActionSheet>

AtActionSheet 参数

参数	说明	类型	可选值	默认值
title	元素的标题	String	-	-
isOpened	是否展示元素	Boolean	-	false
cancelText	取消按钮的内容	String	-	-

AtActionSheet 事件

事件名称	说明	返回参数
onClose	元素被关闭触发的事件	-
onCancel	点击了底部取消按钮触发的事件	-

AtActionSheetItem 事件

事件名称	说明	返回参数
onClick	点击 Item 触发的事件	-