# Actionsheet 动作菜单

[toc]

`Actionsheet`是从底部弹出模态框，用来承载一组与当前场景相关的操作菜单。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-actionsheet": "../dist/actionsheet/index"
  }
}

```

## 用法

### 基础用法

需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性详情见文档下方表格。

```html
<tea-actionsheet 
  actions="{{ actions }}" 
  show="{{ show }}" 
  backdropClosable="{{ backdropClosable }}"  
  bind:click="handleClick"
>
</tea-actionsheet>
```

```javascript
Page({
  data: {
    show: false,
    backdropClosable: false,
    actions: [
      {
        name: "示例菜单一"
      },
      {
        name: "示例菜单二"
      }
    ]
  },

  handleClick(e) {
    console.log(e.detail);
  }
})
```

### 菜单选项带状态

每个菜单选项皆可以设置为加载状态或禁用状态。

```html
<tea-actionsheet 
  actions="{{ actions }}" 
  show="{{ show }}" 
  backdropClosable="{{ backdropClosable }}" 
>
</tea-actionsheet>
```

```javascript
Page({
  data: {
    show: false,
    backdropClosable: false,
    actions: [
      {
        name: "菜单选项一", 
        disabled: true
      },
      {
        name: "菜单选项二", 
        loading: true
      }, 
      {
        name: "菜单选项三"
      }
    ]
  }
})
```

### 菜单含警示操作选项

设置`destructive`属性后，当前选项以警示操作选项样式做展示。

```html
<tea-actionsheet 
  actions="{{ actions }}" 
  show="{{ show }}" 
  backdropClosable="{{ backdropClosable }}" 
>
</tea-actionsheet>
```

```javascript
Page({
  data: {
    show: false,
    backdropClosable: false,
    actions: [
      {
        name: "菜单选项一"
      },
      {
        name: "菜单选项二"
      }, 
      {
        name: "菜单选项三", 
        destructive: true
      }
    ]
  }
})
```

### 展示取消按钮

设置`cancelButtonText`属性后，会在菜单最底部展示取消按钮，点击后关闭当前菜单。

```html
<tea-actionsheet 
  actions="{{ actions }}" 
  show="{{ show }}" 
  cancelButtonText="{{ 取消 }}" 
  backdropClosable="{{ backdropClosable }}" 
>
</tea-actionsheet>
```

### 展示标题说明

设置`title`属性后，会在选项上方显示标题说明。

```html
<tea-actionsheet 
  actions="{{ actions }}" 
  show="{{ show }}" 
  title="这里为菜单标题说明，最多一行" 
  backdropClosable="{{ backdropClosable }}" 
>
</tea-actionsheet>
```

## Props

| 参数                 | 描述          | 类型        | 默认值     |
| ------------------ | ----------- | --------- | ------- |
| show               | 是否显示动作菜单    | `Boolean` | `false` |
| actions            | 菜单选项        | `Array`   | `[]`    |
| title              | 标题          | `String`  | -       |
| cancelButtonText   | 取消按钮文字      | `String`  | -       |
| backdropClosable   | 点击遮罩层是否关闭菜单 | `Boolean` | `false` |
| closeOnClickAction | 是否在点击选项后关闭  | `Boolean` | `true`  |

## 事件

| 事件名                | 描述        | 回调参数              |
| ------------------ | --------- | ----------------- |
| bind:click         | 点击菜单选项时触发 | e.detail: 选项对应的对象 |
| bind:closed        | 组件关闭时触发   | -                 |
| bind:cancel        | 点击取消按钮时触发 | -                 |
| bind:clickbackdrop | 点击遮罩时触发   | -                 |

## actions

`Props`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：

| 键名          | 描述                                                                                              | 类型        | 默认值                                                                                             |
| ----------- | ----------------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------- |
| name        | 菜单选项文案                                                                                          | `String`  | -                                                                                               |
| description | 菜单选项说明文案                                                                                        | `String`  | -                                                                                               |
| textColor   | 设置`name`文字颜色                                                                                    | `String`  | -                                                                                               |
| loading     | 是否为加载状态                                                                                         | `Boolean` | `false`                                                                                         |
| disabled    | 是否为禁用状态                                                                                         | `Boolean` | `false`                                                                                         |
| destructive | 是否为警示操作选项                                                                                       | `Boolean` | `false`                                                                                         |
| className   | 为当前菜单选项添加额外的class类名                                                                             | `String`  | -                                                                                               |
| openType    | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | `String`  | `["contact", "share", "getPhoneNumber", "getUserInfo", "launchApp", "openSetting", "feedback"]` |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                     | 默认值                          | 描述  |
| --------------------------------------- | ---------------------------- | --- |
| actionsheet-title-text-size             | @font-size-sm                | -   |
| actionsheet-title-text-color            | @text-light-color            | -   |
| actionsheet-title-min-height            | 56px                         | -   |
| actionsheet-title-padding               | @padding-none @padding-md    | -   |
| actionsheet-title-background-color      | @background-base-color       | -   |
| actionsheet-item-text-size              | @font-size-xl                | -   |
| actionsheet-item-min-height             | 56px                         | -   |
| actionsheet-item-padding                | @padding-sm @padding-md      | -   |
| actionsheet-item-background-color       | @background-base-color       | -   |
| actionsheet-item-hover-background-color | @background-base-hover-color | -   |
| actionsheet-item-disabled-text-color    | @text-disabled-color         | -   |
| actionsheet-description-text-size       | @font-size-xs                | -   |
| actionsheet-description-text-color      | @text-light-color            | -   |
| actionsheet-cancel-margin-top           | @margin-xs                   | -   |
| actionsheet-destructive-item-text-color | @text-danger-color           | -   |
| actionsheet-divider-color               | @border-divider-color        | -   |