> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/cao-zuo-fan-kui/actionsheet-dong-zuo-mian-ban.md).

# ActionSheet 动作面板

## 概述

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

## 使用指南

在.vue中引入组件

```javascript
import iActionSheet from 'iview-mpvue/dist/components/action-sheet/action-sheet'
export default {
    components: {
        'i-action-sheet': iActionSheet
    }
}
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/action-sheet/style/css'
```

## 示例

```markup
<div style="margin-top: 100px">
    <i-button type="ghost" @click="handleOpen1">一般用法</i-button>
    <i-button type="ghost" @click="handleOpen2">带有提示、异步</i-button>
</div>
<i-action-sheet :visible="visible1" :actions="actions1" :show-cancel="true" @cancel="handleCancel1" @click="handleClickItem1"></i-action-sheet>
<i-action-sheet :visible="visible2" :actions="actions2" :show-cancel="true" @cancel="handleCancel2" @click="handleClickItem2" :mask-closable="false">
    <div slot="header" style="padding: 16px">
        <div style="color: #444;font-size:16px;">确定吗?</div>
        <div>删除后无法恢复哦</div>
    </div>
</i-action-sheet>
<i-message ref="message"></i-message>
```

```javascript
<script>
    import { $Message } from 'iview-mpvue/dist/components/base/index'
    export default {
        ...
        data() {
            return {
                visible1: false,
                visible2: false,
                actions1: [
                    {
                        name: '选项1'
                    },
                    {
                        name: '选项2'
                    },
                    {
                        name: '去分享',
                        icon: 'share',
                        openType: 'share'
                    }
                ],
                actions2: [
                  {
                      name: '删除',
                      color: '#ed3f14'
                  }
                ]
            }
        },
        onShareAppMessage() {
            return {
                title: 'iView Weapp',
                imageUrl: 'https://file.iviewui.com/iview-weapp-logo.png'
            };
        },
        methods: {
            handleOpen1() {
                this.visible1 = true
            },
            handleOpen2() {
                this.visible2 = true
            },
            handleCancel1() {
                this.visible1 = false
            },
            handleCancel2() {
                this.visible2 = false
            },
            handleClickItem1(evt) {
                const index = evt.index + 1
                $Message(this, {content: index})
            },
            handleClickItem2(evt) {
                const action = [...this.actions2]
                action[0].loading = true
                this.actions2 = action
                setTimeout(() => {
                    action[0].loading = false
                    this.visible2 = false
                    this.actions2 = action
                    $Message(this, {
                        content: '删除成功',
                        type: 'success'
                    })
                }, 2000)
            }
        }
    }
</script>
```

## API

ActionSheet properties

| 属性             | 说明             | 类型      | 默认值   |
| -------------- | -------------- | ------- | ----- |
| i-class        | 自定义 class 类名   | String  | -     |
| i-class-mask   | 自定义 遮罩层 类名     | String  | -     |
| i-class-header | 自定义 标题栏 类名     | String  | -     |
| visible        | 是否显示组件         | Boolean | false |
| mask-closable  | 点击遮罩层是否可以关闭组件  | Boolean | true  |
| show-cancel    | 是否显示取消按钮       | Boolean | false |
| cancel-text    | 取消按钮的文案        | String  | 取消    |
| actions        | 按钮组，具体项参照后面的表格 | Array   | \[]   |

ActionSheet events

| 事件名         | 说明                            | 返回值       |
| ----------- | ----------------------------- | --------- |
| v-on:click  | 点击某个按钮时触发，返回按钮所在 actions 中的索引 | { index } |
| v-on:cancel | 点击关闭或遮罩层时触发                   | -         |

ActionSheet slot

| 名称     | 说明           |
| ------ | ------------ |
| header | 标题栏，可以添加提示信息 |

ActionSheet actions

| 属性       | 说明         | 类型      | 默认值   |
| -------- | ---------- | ------- | ----- |
| name     | 按钮文案       | String  | -     |
| icon     | 按钮图标       | String  | -     |
| color    | 按钮文字的颜色    | String  | -     |
| loading  | 按钮是否显示为加载中 | Boolean | false |
| openType | 按钮的微信开放能力  | String  | -     |