<template>
    <div style="margin:50px">
        <a-button type="primary" @click="info">全局提示</a-button>
    </div>
</template>
<script>
import { message } from "ant-design-vue";
export default {
    setup() {
        const info = () => {
            message.success("全局提示框");
            message.success("全局提示框",1);
            message.success("全局提示框",1,()=>{
                console.log('提示框关闭 回调函数');
            });
        };
        return {
            info
        };
    }
};
</script>

<template>
    <div style="margin-bottom: 16px">
      <a-button type="primary" @click="addShow"> 添加 </a-button>
    </div>
    # 1、visible(v-model)  对话框是否可见
    # 2、width 宽度
    # 3、centered 垂直居中展示 Modal
    # 4、title 标题
    # 5、mask 是否展示遮罩，默认：true
    # 6、wrapClassName 对话框外层容器的类名，按照官网给的样式，可以把窗口最大化
    # 7、okText 确认按钮文字
    # 8、okType 确认按钮类型
    # 9、cancelText 取消按钮文字
    # 10、footer 底部内容，当不需要默认底部按钮时，可以设为 :footer="null"
    <a-modal
        v-model:visible="addModal"
        width="100%"
        centered
        title="添加"
        :mask="mask"
        wrapClassName="full-modal"
        okText="确定"
        okType="primary"
        cancelText="取消"
        :footer="null"
    >
        <p>欧阳克</p>
        <p>朱天蓬</p>
        <p>灭绝师太</p>
    </a-modal>
</template>
<script>
import { ref } from "vue";
export default {
    setup(){
        const addModal = ref(false);
        const addShow = () => {
            addModal.value = true;
        };
        return {
            addModal,
            addShow,
            mask: false,
        }
    }
};
</script>
# 按照官网给的样式，可以把窗口最大化，把less改为scss
<style lang="scss">
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }
    .ant-modal-body {
        flex: 1;
    }
}
</style>

<template>
    <div style="margin-bottom: 16px">
      <a-button type="primary" @click="addShow"> 添加 </a-button>
    </div>
    # 1、@ok 点击确定回调
    # 2、@cancel 点击遮罩层或右上角叉或取消按钮的回调
    <a-modal
        v-model:visible="addModal"
        width="100%"
        title="添加"
        okText="确定"
        okType="primary"
        @ok="addOk"
        @cancel="addCancel"
    >
        <p>欧阳克</p>
        <p>朱天蓬</p>
        <p>灭绝师太</p>
    </a-modal>
</template>
<script>
import { ref } from "vue";
export default {
    setup(){
        const addModal = ref(false);
        const addShow = () => {
            addModal.value = true;
        };
        const addOk = (e) => {
            console.log(e);
        };
        const addCancel = (e) => {
            console.log(e);
        };
        return {
            addModal,
            addShow,
            addOk,
            addCancel
        }
    }
};
</script>

<template>
    <div style="margin-bottom: 16px">
    <a-button type="primary" @click="addShow"> 添加 </a-button>
    </div>
    # 1、@ok 点击确定回调
    # 2、@cancel 点击遮罩层或右上角叉或取消按钮的回调
    <a-modal
        v-model:visible="addModal"
        width="100%"
        title="添加"
        okText="确定"
        okType="primary"
        @ok="addOk"
        @cancel="addCancel"
    >
        <p>欧阳克</p>
        <p>朱天蓬</p>
        <p>灭绝师太</p>
    </a-modal>
</template>
<script>
import { ref } from "vue";
    # 1、需要引入Modal
    import { Modal } from "ant-design-vue";
export default {
    setup() {
        const addModal = ref(false);
        const addShow = () => {
            addModal.value = true;
        };
        const addOk = (e) => {
            # 2、信息框
            Modal.info({
                title: "修改的标题",
                content: "修改的内容",
                width: 500,
                mask: false,
                okText: "确定",
                okType: "primary",
                closable: true,
                onOk(e){
                    console.log(e);
                }
            });
            # 3、成功框
            Modal.success();
            # 4、错误框
            Modal.error();
            # 5、警告框
            Modal.warning();
            # 6、提交框，多个取消按钮
            Modal.confirm();
                
            # 7、update 修改
            const mo = Modal.confirm({
                title: "修改的标题",
                content: "修改的内容",
                width: 500,
                mask: false,
                okText: "确定",
                okType: "primary",
                closable: true,
                onOk(e) {
                    console.log(e);
                }
            });
            mo.update({
                title: "修改的标题1",
                content: "修改的内容1",
            });
            # 9、销毁Modal，这里得mo是变量
            mo.destroy()
            # 10、销毁全部Modal
            Modal.destroyAll()
        };
        const addCancel = (e) => {
            console.log(e);
        };
        return {
            addModal,
            addShow,
            addOk,
            addCancel
        }
    }
};
</script>