模态框 Modal

模态对话框

何时使用

在当前页面正中打开一个浮层，承载相应的操作或者提示内容

使用

modal.value.info(data: Modal) // info 调用
modal.value.success(data: Modal) // success 调用
modal.value.error(data: Modal) // error 调用
modal.value.warning(data: Modal) // warning 调用
modal.value.confirm(data: Modal) // confirm 调用
modal.value.erase(data: Modal) // erase 调用

基本使用

共有六种不同类型的模态框

Info Modal

Success Modal

Error Modal

Warning Modal

Confirm Modal

Erase Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
const modal = ref()
function openInfoModal() {
  modal.value.info({
    title: 'This is an info modal',
    content: 'Some descriptions ...',
    onKnow: () => {
      console.log('Know Click')
    }
  })
}
function openSuccessModal() {
  modal.value.success({
    title: 'This is a success modal',
    content: 'Some descriptions ...',
    onKnow: () => {
      console.log('Know Click')
    }
  })
}
function openErrorModal() {
  modal.value.error({
    title: 'This is an error modal',
    content: 'Some descriptions ...',
    onKnow: () => {
      console.log('Know Click')
    }
  })
}
function openWarningModal() {
  modal.value.warning({
    title: 'This is a warning modal',
    content: 'Some descriptions ...',
    onKnow: () => {
      console.log('Know Click')
    }
  })
}
function openConfirmModal() {
  modal.value.confirm({
    title: 'This is a confirm modal',
    content: 'Some descriptions ...',
    onOk: () => {
      console.log('Yes Click')
    },
    onCancel: () => {
      console.log('No Click')
    }
  })
}
function openEraseModal() {
  modal.value.erase({
    title: 'This is an erase modal',
    content: 'Some descriptions ...',
    okType: 'danger',
    onOk: () => {
      console.log('Yes Click')
    },
    onCancel: () => {
      console.log('No Click')
    }
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openInfoModal">Info Modal</Button>
    <Button type="primary" @click="openSuccessModal">Success Modal</Button>
    <Button type="primary" @click="openErrorModal">Error Modal</Button>
    <Button type="primary" @click="openWarningModal">Warning Modal</Button>
    <Button type="primary" @click="openConfirmModal">Confirm Modal</Button>
    <Button type="primary" @click="openEraseModal">Erase Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

自定义宽度

Custom Number Width Modal

Custom Percent Width Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
const modal = ref()
function openCustomNumberWidth() {
  modal.value.info({
    title: 'This is a custom number width modal',
    content: 'Some descriptions ...',
    width: 365
  })
}
function openCustomPercentWidth() {
  modal.value.confirm({
    title: 'This is a custom percent width modal',
    content: 'Some descriptions ...',
    width: '28%'
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openCustomNumberWidth">Custom Number Width Modal</Button>
    <Button type="primary" @click="openCustomPercentWidth">Custom Percent Width Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

自定义图标

Custom Info Icon Modal

Custom Confirm Icon Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { CloudFilled, NotificationFilled } from '@ant-design/icons-vue'
const modal = ref()
function openCustomInfoIcon() {
  modal.value.info({
    title: 'This is a custom info icon modal',
    content: 'Some descriptions ...',
    icon: h(CloudFilled)
  })
}
function openCustomConfirmIcon() {
  modal.value.confirm({
    title: 'This is a custom confirm icon modal',
    content: 'Some descriptions ...',
    icon: h(NotificationFilled, { style: 'color: #ff6900' })
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openCustomInfoIcon">Custom Info Icon Modal</Button>
    <Button type="primary" @click="openCustomConfirmIcon">Custom Confirm Icon Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

自定义样式

Custom Body Class Modal

Custom Body & Mask Style Modal

Custom Title & Content Style Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { FireFilled, NotificationFilled, CrownFilled } from '@ant-design/icons-vue'
const modal = ref()
function openCustomClass() {
  modal.value.info({
    title: 'This is a custom class modal',
    content: 'Some descriptions ...',
    icon: h(FireFilled),
    bodyClass: 'custom-class'
  })
}
function openCustomStyle() {
  modal.value.confirm({
    title: 'This is a custom style modal',
    content: 'Some descriptions ...',
    icon: h(NotificationFilled),
    bodyStyle: {
      padding: '24px',
      borderRadius: '12px'
    },
    maskStyle: {
      backgroundColor: 'rgba(0, 0, 0, 0.6)'
    }
  })
}
function openCustomTitleContentStyle() {
  modal.value.success({
    title: 'This is a custom style modal',
    content: 'Some descriptions ...',
    icon: h(CrownFilled),
    titleStyle: {
      color: '#52c41a'
    },
    contentStyle: {
      color: '#52c41a'
    }
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openCustomClass">Custom Body Class Modal</Button>
    <Button type="primary" @click="openCustomStyle">Custom Body & Mask Style Modal</Button>
    <Button type="primary" @click="openCustomTitleContentStyle">Custom Title & Content Style Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>
<style lang="less" scoped>
:deep(.custom-class) {
  .modal-header {
    color: #ff6900 !important;
    .modal-title {
      color: #ff6900 !important;
    }
  }
  .modal-content {
    color: #ff6900 !important;
  }
}
</style>

自定义按钮

Custom Info Btn Modal

Custom Confirm Btns Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
const modal = ref()
function openCustomInfoBtn() {
  modal.value.info({
    title: 'This is a custom info btn modal',
    content: 'Some descriptions ...',
    noticeText: 'Noted',
    noticeProps: {
      shape: 'round'
    },
    onKnow: () => {
      console.log('Know Click')
    }
  })
}
function openCustomConfirmBtns() {
  modal.value.confirm({
    title: 'This is a custom confirm btn modal',
    content: 'Some descriptions ...',
    cancelText: 'No',
    okText: 'Yes',
    okType: 'danger',
    okProps: {
      ghost: true
    },
    onOk: () => {
      console.log('Yes Click')
    },
    onCancel: () => {
      console.log('No Click')
    }
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openCustomInfoBtn">Custom Info Btn Modal</Button>
    <Button type="primary" @click="openCustomConfirmBtns">Custom Confirm Btns Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

自定义位置

Fixed Top Number Modal

Fixed Top Percent Modal

Vertically Centered Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
const modal = ref()
function openNumberFixed() {
  modal.value.info({
    title: '60px This is a number fixed modal',
    content: 'Some descriptions ...',
    centered: false,
    top: 60
  })
}
function openPercentFixed() {
  modal.value.info({
    title: '20% This is a percent fixed modal',
    content: 'Some descriptions ...',
    centered: false,
    top: '20%'
  })
}
function openVerticalCentered() {
  modal.value.info({
    title: 'This is a vertically centered modal',
    content: 'Some descriptions ...',
    centered: true
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Space>
    <Button type="primary" @click="openNumberFixed">Fixed Top Number Modal</Button>
    <Button type="primary" @click="openPercentFixed">Fixed Top Percent Modal</Button>
    <Button type="primary" @click="openVerticalCentered">Vertically Centered Modal</Button>
  </Space>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

动画出现位置

Transform Origin Center Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
const modal = ref()
function openTransformCenterModal() {
  modal.value.info({
    title: 'This is a transform-origin center modal',
    content: 'Some descriptions ...',
    transformOrigin: 'center'
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
function onKnow() {
  // “知道了”按钮回调
  console.log('know')
}
</script>
<template>
  <Button type="primary" @click="openTransformCenterModal">Transform Origin Center Modal</Button>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" @know="onKnow" />
</template>

异步延迟关闭

Delayed Close Modal

Show Code

vue

<script setup lang="ts">
import { ref } from 'vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
const modal = ref()
function openDelayedModal() {
  modal.value.confirm({
    title: 'Do you Want to submit these items ?',
    content: 'When clicked the OK button, this dialog will be closed after 1 second',
    icon: h(ExclamationCircleFilled),
    onOk: () => {
      console.log('custom ok')
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      }).catch(() => console.log('Oops errors!'))
    },
    onCancel: () => {
      console.log('custom cancel')
    }
  })
}
function onCancel() {
  // 点击蒙层或 Esc 键或取消按钮的回调
  console.log('cancel')
}
function onOk() {
  // “确定”按钮回调
  console.log('ok')
}
</script>
<template>
  <Button type="primary" @click="openDelayedModal">Delayed Close Modal</Button>
  <Modal ref="modal" @cancel="onCancel" @ok="onOk" />
</template>

APIs

参数	说明	类型	默认值
width	模态框宽度，单位 `px`	string \| number	420
icon	自定义图标	VNode \| Slot	undefined
title	模态框标题	string \| slot	undefined
titleStyle	自定义标题样式	CSSProperties	{}
content	模态框内容	string \| slot	undefined
contentStyle	自定义内容样式	CSSProperties	{}
bodyClass	自定义 `body` 类名	string	undefined
bodyStyle	自定义 `body` 样式	CSSProperties	{}
cancelText	取消按钮文字	string	'取消'
cancelProps	取消按钮 `props` 配置，参考 Button Props	object	{}
okText	确认按钮文字	string	'确定'
okType	确认按钮类型	'default' \| 'reverse' \| 'primary' \| 'danger' \| 'dashed' \| 'text' \| 'link'	'primary'
okProps	确认按钮 `props` 配置，优先级高于 `okType`，参考 Button Props	object	{}
noticeText	通知按钮文字	string	'知道了'
noticeProps	通知按钮 `props` 配置，参考 Button Props	object	{}
destroyOnClose	关闭时是否销毁 `Modal` 里的子元素	boolean	false
centered	是否水平垂直居中，否则固定高度水平居中	boolean	false
top	固定高度水平居中时，距顶部高度，仅当 `centered: false` 时生效，单位 `px`	string \| number	100
transformOrigin	模态框动画出现的位置	'mouse' \| 'center'	'mouse'
confirmLoading	确定按钮 `loading`	boolean	false
blockScroll	是否在打开模态框时禁用背景滚动	boolean	true
keyboard	是否支持键盘 `esc` 关闭	boolean	true
maskClosable	点击蒙层是否允许关闭	boolean	true
maskStyle	自定义蒙层样式	CSSProperties	{}

调用时传入的 Modal 类型，以下属性均具有更高优先级

名称	说明	类型	默认值
width?	模态框宽度，单位 `px`	string \| number	undefined
icon?	自定义图标	VNode	undefined
title?	模态框标题	string	undefined
titleStyle?	自定义标题样式	CSSProperties	undefined
content?	模态框内容	string	undefined
contentStyle?	自定义内容样式	CSSProperties	undefined
bodyClass?	自定义 `body` 类名	string	undefined
bodyStyle?	自定义 `body` 样式	CSSProperties	undefined
cancelText?	取消按钮文字	string	undefined
cancelProps?	取消按钮 `props` 配置，参考 Button Props	object	undefined
okText?	确认按钮文字	string	undefined
okType?	确认按钮类型	'default' \| 'reverse' \| 'primary' \| 'danger' \| 'dashed' \| 'text' \| 'link'	undefined
okProps?	确认按钮 `props` 配置，优先级高于 `okType`，参考 Button Props	object	undefined
noticeText?	通知按钮文字	string	undefined
noticeProps?	通知按钮 `props` 配置，参考 Button Props	object	undefined
destroyOnClose?	关闭时是否销毁 `Modal` 里的子元素	boolean	undefined
centered?	是否水平垂直居中，否则固定高度水平居中	boolean	undefined
top?	固定高度水平居中时，距顶部高度，仅当 `centered: false` 时生效，单位 `px`	string \| number	undefined
transformOrigin?	模态框动画出现的位置	'mouse' \| 'center'	undefined
blockScroll?	是否在打开模态框时禁用背景滚动	boolean	undefined
keyboard?	是否支持键盘 `esc` 关闭	boolean	undefined
maskClosable?	点击蒙层是否允许关闭	boolean	undefined
maskStyle?	自定义蒙层样式	CSSProperties	undefined
onKnow?	点击知道了按钮的回调	Function	undefined
onOk?	点击确认按钮的回调	Function	undefined
onCancel?	点击遮罩层或取消按钮的回调	Function	undefined

Slots

名称	说明	类型
icon	自定义图标	v-slot:icon
title	自定义模态框标题	v-slot:title
default	自定义模态框内容	v-slot:default

Methods

名称	说明	类型
info	信息提示模态框	(data: Modal) => void
success	成功提示模态框	(data: Modal) => void
error	错误提示模态框	(data: Modal) => void
warning	警告提示模态框	(data: Modal) => void
erase	删除提示模态框	(data: Modal) => void

Events

名称	说明	类型
cancel	点击蒙层或 `Esc` 键或取消按钮的回调	() => void
ok	点击确定按钮的回调	() => void
know	点击知道了按钮的回调	() => void

全局挂载使用

全局挂载

App.vue

vue

<script setup lang="ts">
const modalRef = useTemplateRef('modalRef')
onMounted(() => {
  window['$modal'] = modalRef.value
})
onBeforeUnmount(() => {
  delete window['$modal']
})
</script>
<template>
  <RouterView />
  <Modal ref="modalRef" />
</template>

使用

XXX.vue

vue

<script setup lang="ts">
const $modal = window['$modal']
function onClick() {
  $modal.confirm({
    title: 'Confirm Title',
    content: 'Some descriptions ...',
    onOk: () => {
      console.log('点击了确定按钮')
    },
    onCancel: () => {
      console.log('点击了取消按钮')
    }
  })
}
</script>
<template>
  <Button @click="onClick">按钮</Button>
</template>

模态框 Modal ​

何时使用 ​

基本使用 ​

自定义宽度 ​

自定义图标 ​

自定义样式 ​

自定义按钮 ​

自定义位置 ​

动画出现位置 ​

异步延迟关闭 ​

APIs ​

Modal ​

Modal Type ​

Slots ​

Methods ​

Events ​

全局挂载使用 ​

何时使用

基本使用

自定义宽度

自定义图标

自定义样式

自定义按钮

自定义位置

动画出现位置

异步延迟关闭

APIs

Modal

Modal Type

Slots

Methods

Events

全局挂载使用