Modal 弹窗

代码演示

基础用法

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

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

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

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

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

可拖拽对话框

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

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

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

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

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

异步关闭

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

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

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

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

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

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

回调

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

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

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

function handleCancel() {
  // eslint-disable-next-line no-console
  console.log('点击了取消')
  closeModal()
}

function handleOk() {
  // eslint-disable-next-line no-console
  console.log('点击了确定')
  closeModal()
}

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

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

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

API

Props

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