Modal对话框

Modal对话框是一种模态对话框，用于在不跳转页面、不打断用户工作流程的情况下，让用户处理事务。此外，Modal.confirm()等语法糖方法可用于快速创建简洁的确认框询问用户。

代码演示

基本用法：通过按钮点击控制对话框的显示与隐藏。

vue

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};
</script>

确认对话框：使用confirm()方法快速弹出确认框，可定制标题、图标、内容、按钮文本及按钮点击回调等。

vue

<template>
  <a-space wrap>
    <a-button @click="showConfirm">Confirm</a-button>
    <a-button @click="showPromiseConfirm">With promise</a-button>
    <a-button type="dashed" @click="showDeleteConfirm">Delete</a-button>
    <a-button type="dashed" @click="showPropsConfirm">With extra props</a-button>
  </a-space>
</template>
<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from '@design-middle-center/fuse-design-vue'
const showConfirm = () => {
  Modal.confirm({
    title: 'Do you Want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode('div', { style: 'color:red;' }, 'Some descriptions'),
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
    class: 'test'
  })
}
const showDeleteConfirm = () => {
  Modal.confirm({
    title: 'Are you sure delete this task?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}
const showPropsConfirm = () => {
  Modal.confirm({
    title: 'Are you sure delete this task?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    okButtonProps: {
      disabled: true
    },
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

function showPromiseConfirm() {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content: 'When clicked the OK button, this dialog will be closed after 1 second',
    async onOk() {
      try {
        return await new Promise((resolve, reject) => {
          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
        })
      } catch {
        return console.log('Oops errors!')
      }
    },
    onCancel() {}
  })
}
</script>

信息提示：展示不同类型的信息提示对话框，只包含一个关闭按钮。

vue

<template>
  <a-space wrap>
    <a-button @click="info">Info</a-button>
    <a-button @click="success">Success</a-button>
    <a-button @click="error">Error</a-button>
    <a-button @click="warning">Warning</a-button>
  </a-space>
</template>
<script lang="ts" setup>
import { Modal } from '@design-middle-center/fuse-design-vue'
import { h } from 'vue'
const info = () => {
  Modal.info({
    title: 'This is a notification message',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...')
    ]),
    onOk() {
      console.log('ok')
    }
  })
}
const success = () => {
  Modal.success({
    title: 'This is a success message',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...')
    ])
  })
}

const error = () => {
  Modal.error({
    title: 'This is an error message',
    content: 'some messages...some messages...'
  })
}

const warning = () => {
  Modal.warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...'
  })
}
</script>

手动更新和移除：手动更新和关闭通过Modal.method方式创建的对话框。

vue

<template>
  <a-button @click="countDown">Open modal to close in 5s</a-button>
</template>
<script lang="ts" setup>
import { Modal } from '@design-middle-center/fuse-design-vue'
const countDown = () => {
  let secondsToGo = 5
  const modal = Modal.success({
    title: 'This is a notification message',
    content: `This modal will be destroyed after ${secondsToGo} second.`
  })
  const interval = setInterval(() => {
    secondsToGo -= 1
    modal.update({
      content: `This modal will be destroyed after ${secondsToGo} second.`
    })
  }, 1000)
  setTimeout(() => {
    clearInterval(interval)
    modal.destroy()
  }, secondsToGo * 1000)
}
</script>

API

参数	说明	类型	默认值
afterClose	关闭动画结束后的回调函数	() => void	-
centered	是否垂直居中显示	boolean	false
cancelButtonProps	取消按钮的额外属性	object	-
cancelText	取消按钮的文本	string	`Cancel`
closable	是否显示关闭按钮	boolean	true
closeIcon	自定义关闭图标	VNode	-
confirmButtonProps	确定按钮的额外属性	object	-
confirmLoading	确定按钮是否显示加载状态	boolean	false
destroyOnClose	关闭时是否销毁 Modal 里的子元素	boolean	false
footer	自定义页脚，设为 `null` 时不显示页脚	VNode \| (() => VNode) \| null	-
getContainer	设置 Modal 挂载的 HTML 节点	string \| (() => HTMLElement)	`() => document.body`
keyboard	按下 ESC 时是否关闭 Modal	boolean	true
mask	是否展示遮罩层	boolean	true
maskClosable	点击遮罩层是否可关闭 Modal	boolean	true
maskStyle	遮罩层的样式	object	-
okButtonProps	确定按钮的额外属性（与 `confirmButtonProps` 相同，优先使用 `okButtonProps`）	object	-
okText	确定按钮的文本	string	`OK`
okType	确定按钮的类型，如 `primary`、`danger` 等	string	`primary`
open(v - model)	是否显示 Modal	boolean	-
title	Modal 的标题	string \| VNode	-
visible	与 `open` 作用相同，是否显示 Modal	boolean	-
width	Modal 的宽度	number \| string	`520`
wrapClassName	外层容器的类名	string	-
zIndex	Modal 的 `z - index` 值	number	-

事件名称	说明	回调参数
cancel	点击取消按钮的回调函数	(e: MouseEvent) => void
close	Modal 关闭时的回调函数	(e: MouseEvent) => void
ok	点击确定按钮的回调函数	(e: MouseEvent) => void

参数	说明	类型	默认值
title	确认框的标题	string \| VNode	-
icon	确认框的图标	VNode	-
content	确认框的内容	string \| VNode	-
okText	确定按钮的文本	string	`OK`
okType	确定按钮的类型，如 `primary`、`danger` 等	string	`primary`
cancelText	取消按钮的文本	string	`Cancel`
okButtonProps	确定按钮的额外属性	object	-
cancelButtonProps	取消按钮的额外属性	object	-
onOk	点击确定按钮的回调函数，返回 `Promise` 可延迟关闭	`(() => void)` \| `(() => Promise<void>)`	-
onCancel	点击取消按钮的回调函数，返回 `Promise` 可延迟关闭	`(() => void)` \| `(() => Promise<void>)`	-
getContainer	设置确认框挂载的 HTML 节点	string \| `(() => HTMLElement)`	`() => document.body`
keyboard	按下 ESC 时是否关闭确认框	boolean	true
maskClosable	点击遮罩层是否可关闭确认框	boolean	true
maskStyle	遮罩层的样式	object	-
zIndex	确认框的 `z - index` 值	number	-
class	自定义确认框的类名	string	-

参数	说明	类型	默认值
title	信息提示框的标题	string \| VNode	-
content	信息提示框的内容	string \| VNode	-
okText	确定按钮的文本	string	`OK`
onOk	点击确定按钮的回调函数	() => void	-
getContainer	设置信息提示框挂载的 HTML 节点	string \| (() => HTMLElement)	`() => document.body`
keyboard	按下 ESC 时是否关闭信息提示框	boolean	true
maskClosable	点击遮罩层是否可关闭信息提示框	boolean	true
maskStyle	遮罩层的样式	object	-
zIndex	信息提示框的 `z - index` 值	number	-

参数	说明	类型	默认值
title	成功提示框的标题	string \| VNode	-
content	成功提示框的内容	string \| VNode	-
okText	确定按钮的文本	string	`OK`
onOk	点击确定按钮的回调函数	() => void	-
getContainer	设置成功提示框挂载的 HTML 节点	string \| (() => HTMLElement)	`() => document.body`
keyboard	按下 ESC 时是否关闭成功提示框	boolean	true
maskClosable	点击遮罩层是否可关闭成功提示框	boolean	true
maskStyle	遮罩层的样式	object	-
zIndex	成功提示框的 `z - index` 值	number	-

参数	说明	类型	默认值
title	错误提示框的标题	string \| VNode	-
content	错误提示框的内容	string \| VNode	-
okText	确定按钮的文本	string	`OK`
onOk	点击确定按钮的回调函数	() => void	-
getContainer	设置错误提示框挂载的 HTML 节点	string \| (() => HTMLElement)	`() => document.body`
keyboard	按下 ESC 时是否关闭错误提示框	boolean	true
maskClosable	点击遮罩层是否可关闭错误提示框	boolean	true
maskStyle	遮罩层的样式	object	-
zIndex	错误提示框的 `z - index` 值	number	-

参数	说明	类型	默认值
title	警告提示框的标题	string \| VNode	-
content	警告提示框的内容	string \| VNode	-
okText	确定按钮的文本	string	`OK`
onOk	点击确定按钮的回调函数	() => void	-
getContainer	设置警告提示框挂载的 HTML 节点	string \| (() => HTMLElement)	`() => document.body`
keyboard	按下 ESC 时是否关闭警告提示框	boolean	true
maskClosable	点击遮罩层是否可关闭警告提示框	boolean	true
maskStyle	遮罩层的样式	object	-
zIndex	警告提示框的 `z - index` 值	number	-

返回一个包含 modal 和 contextHolder 的数组。modal 包含 confirm、info、success、error、warning 等方法，用于创建各种类型的模态框。contextHolder 是一个 VNode，用于提供上下文，在模板中直接使用。

注意事项

受控与非受控：open 或 visible 用于控制 Modal 的显示与隐藏，使用时需确保其状态的正确更新，以避免出现意外行为。
销毁与性能：当 destroyOnClose 设为 true 时，关闭 Modal 会销毁其中的子元素，有助于释放资源，特别是在子元素包含大量数据或复杂逻辑时。
样式定制：通过 wrapClassName、maskStyle 等属性可以方便地对 Modal 的外层样式和遮罩层样式进行定制，以满足不同的设计需求。

Modal对话框 ​

代码演示 ​

API ​

Modal ​

Modal 事件 ​

Modal.confirm(options) ​

Modal.info(options) ​

Modal.success(options) ​

Modal.error(options) ​

Modal.warning(options) ​

Modal.useModal() ​

注意事项 ​

Modal对话框

代码演示

API

Modal

Modal 事件

Modal.confirm(options)

Modal.info(options)

Modal.success(options)

Modal.error(options)

Modal.warning(options)

Modal.useModal()

注意事项