Modal 弹窗

代码演示

基础用法

<template>
    <a-button
        type="primary"
        @click="handleOpen()">
        打开
    </a-button>

    <a-modal
        :open="modal.open"
        :title="modal.title"
        @cancel="closeModal()">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script setup>
import { useModal } from '@/hooks'

const { modal, openModal, closeModal } = useModal()

function handleOpen() {
    openModal({
        title: '基础用法',
    })
}
</script>

<style lang="less" scoped></style>

可拖拽对话框

<template>
    <a-button
        type="primary"
        @click="handleOpen()">
        打开
    </a-button>

    <a-modal
        :open="modal.open"
        :title="modal.title"
        wrap-class-name="modal-drag"
        @cancel="closeModal()">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script setup>
import { useModal } from '@/hooks'

const { modal, openModal, closeModal } = useModal({
    selector: '.modal-drag',
    draggable: true,
})

function handleOpen() {
    openModal({
        title: '可拖拽对话框',
    })
}
</script>

<style lang="less" scoped></style>

异步关闭

<template>
    <a-button
        type="primary"
        @click="handleOpen()">
        打开
    </a-button>

    <a-modal
        :confirm-loading="modal.confirmLoading"
        :open="modal.open"
        :title="modal.title"
        @cancel="closeModal()"
        @ok="handleOk">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script setup>
import { useModal } from '@/hooks'

const { modal, openModal, closeModal, showLoading } = useModal()

function handleOpen() {
    openModal({
        title: '异步关闭',
    })
}

function handleOk() {
    showLoading()
    setTimeout(() => {
        closeModal()
    }, 2000)
}
</script>

<style lang="less" scoped></style>

回调

<template>
    <a-button
        type="primary"
        @click="handleOpen()">
        打开
    </a-button>

    <a-modal
        :after-close="onAfterClose"
        :open="modal.open"
        :title="modal.title"
        @cancel="handleCancel"
        @ok="handleOk">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script setup>
import { useModal } from '@/hooks'
import { Modal } from 'ant-design-vue'

const { modal, openModal, closeModal } = useModal({
    beforeOpen: (done) => {
        Modal.confirm({
            title: '温馨提示',
            content: '确认打开弹窗',
            onOk() {
                done()
            },
        })
    },
    afterOpen: () => {
        console.log('弹窗已打开')
    },
    beforeClose: (done) => {
        Modal.confirm({
            title: '温馨提示',
            content: '确认关闭弹窗',
            onOk() {
                done()
            },
        })
    },
    afterClose: () => {
        console.log('弹窗已关闭', new Date().getTime())
    },
})

function handleOpen() {
    openModal({
        title: '基础用法',
    })
}

function handleCancel() {
    console.log('点击了取消')
    closeModal()
}

function handleOk() {
    console.log('点击了确定')
    closeModal()
}

function onAfterClose() {
    console.log('弹窗已完全关闭', new Date().getTime())
}
</script>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
tag	标签	string	span
divider	是否显示分割线	boolean	true