Modal 弹框

<template>
<div>
    <Button @click="modal2 = true">头部和底部风格按钮</Button>
    <Modal v-model="modal2" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>弹框标题</span>
        </p>
        <div style="text-align:center">
            <p>弹框的提示内容</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
        </div>
    </Modal>
    
    </div>
</template>
<script>
    export default {
        data () {
            return {
                modal2: false,
                modal_loading: false
            }
        },
        methods: {
            del () {
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    this.$Message.success('Successfully delete');
                }, 2000);
            }
        }
    }
</script>

结果图：