> 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/modal-dui-hua-kuang.md).

# Modal 对话框

## 概述

模态对话框，在浮层中显示，引导用户进行相关操作。

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iModal from 'iview-mpvue/dist/components/modal/modal'
    export default {
        'i-modal': iModal
    }
</script>
```

在main.js中引入样式文件

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

## 示例

```markup
<div style="margin-top: 100px;">
    <i-button @click="handleOpen1">普通对话框</i-button>
    <i-button @click="handleOpen2">无标题对话框</i-button>
    <i-button @click="handleOpen3">自定义按钮对话框</i-button>
    <i-button @click="handleOpen4">纵向按钮，自定义颜色及图标</i-button>
    <i-button @click="handleOpen5">异步操作</i-button>
</div>
<i-modal title="标题" :visible="visible1" @ok="handleClose1" @cancel="handleClose1">
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
    <div>一些文本</div>
</i-modal>
<i-modal :visible="visible2" @ok="handleClose2" @cancel="handleClose2">
    <div>这是一个无标题的对话框</div>
</i-modal>

<i-modal title="支付" :visible="visible3" :actions="actions3" @click="handleClick3">
    <div>请选择支付方式</div>
</i-modal>

<i-modal title="纵向排列的按钮" :visible="visible4" :actions="actions4" action-mode="vertical" @click="handleClick4"></i-modal>

<i-modal title="删除确认" :visible="visible5" :actions="actions5" @click="handleClick5">
    <div>删除后无法恢复哦</div>
</i-modal>

<i-message ref="message" />
```

```javascript
<script>
    import { $Message } from 'iview-mpvue/dist/components/base/index'
    export default {
        ...
        data() {
            return {
                visible1: false,
                visible2: false,
                visible3: false,
                visible4: false,
                visible5: false,
                actions3: [
                    {
                        name: '现金支付',
                        color: '#2d8cf0',
                    },
                    {
                        name: '微信支付',
                        color: '#19be6b'
                    },
                    {
                          name: '取消'
                    }
                ],
                actions4: [
                    {
                        name: '按钮1'
                    },
                    {
                        name: '按钮2',
                        color: '#ff9900'
                    },
                    {
                        name: '按钮3',
                        icon: 'search'
                    }
                ],
                actions5: [
                    {
                        name: '取消'
                    },
                    {
                        name: '删除',
                        color: '#ed3f14',
                        loading: false
                    }
                ]
            }
        },
        methods: {
            handleOpen1() {
                this.visible1 = true
            },
            handleClose1() {
                this.visible1 = false
            },
            handleOpen2() {
                this.visible2 = true
            },
            handleClose2() {
                this.visible2 = false
            },
            handleOpen3() {
                this.visible3 = true
            },
            handleClick3(evt) {
                const index = evt.index
                if (index === 0) {
                    $Message(this, {
                      content: '点击了现金支付'
                    })
                }
                else if (index === 1) {
                    $Message(this, {
                      content: '点击了微信支付'
                    })
                }
                this.visible3 = false
            },
            handleOpen4() {
                this.visible4 = true
            },
            handleClick4(evt) {
                this.visible4 = false
            },
            handleOpen5() {
                this.visible5 = true
            },
            handleClick5(evt) {
                const index = evt.index
                if (index === 0) {
                    this.visible5 = false
                }
                else {
                    const action = [...this.actions5]
                    action[1].loading = true
                    this.actions5 = action
                    setTimeout(() => {
                        action[1].loading = false
                        this.visible5 = false
                        this.actions5 = action
                        $Message(this, {
                            content: '删除成功',
                            type: 'success'
                        })
                    }, 2000)
                }
            }
        }
    }
</script>
```

## API

Modal properties

| 属性                                  | 说明                                   | 类型      | 默认值        |
| ----------------------------------- | ------------------------------------ | ------- | ---------- |
| visible                             | 是否显示组件                               | Boolean | false      |
| title                               | 标题                                   | String  | -          |
| show-ok                             | 是否显示确定按钮                             | Boolean | true       |
| show-                        cancel | 是否显示取消按钮                             | Boolean | true       |
| ok-text                             | 确定按钮的文案                              | String  | 确定         |
| cancel-text                         | 取消按钮的文案                              | String  | 取消         |
| actions                             | 按钮组，具体项参照后面的表格，设置此值后，则默认的确定和取消按钮不予显示 | Array   | \[]        |
| action-mode                         | 按钮的排列方向，可选值为 horizontal 或 vertical   | String  | horizontal |

Modal events

| 事件名         | 说明                            | 返回值       |
| ----------- | ----------------------------- | --------- |
| v-on:click  | 点击某个按钮时触发，返回按钮所在 actions 中的索引 | { index } |
| v-on:ok     | 点击确定按钮时触发                     | -         |
| v-on:cancel | 点击取消按钮时触发                     | -         |

Modal actions

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