Modal 对话框

概述

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

使用指南

在.vue中引入组件

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

在main.js中引入样式文件

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

示例

<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" />

<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