# 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  | -     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iview-mpvue.gitbook.io/iview-mpvue/cao-zuo-fan-kui/actionsheet-dong-zuo-mian-ban.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.