Message Box 消息弹出框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

TIP

MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

import { MessageBox } from '@szhn/dh-design-pc'

消息提示

调用 MessageBox.alert 方法以打开 alert 框。它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。

<template>
  <el-button @click="open">点击打开 Alert</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Message, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.alert('这里是 MessageBox 的正文内容', '标题', {
    confirmButtonText: '知道了',
  }).then(() => {
    Message({ type: 'info', message: '已点击确定' })
  })
}
</script>

确认消息

调用 MessageBox.confirm 以打开确认框，通过 type 字段展示不同的状态图标。

<template>
  <el-button @click="open">打开确认框</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Message, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.confirm('此操作将永久删除该文件，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => Message({ type: 'success', message: '删除成功' }))
    .catch(() => Message({ type: 'info', message: '已取消删除' }))
}
</script>

提交内容

调用 MessageBox.prompt 打开输入框。可使用 inputPattern 校验输入，inputValidator 自定义校验函数。

<template>
  <el-button @click="open">填写邮箱</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Message, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.prompt('请输入邮箱', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: '邮箱格式不正确',
  })
    .then(({ value }) => Message({ type: 'success', message: `提交成功：${value}` }))
    .catch(() => Message({ type: 'info', message: '已取消' }))
}
</script>

使用 VNode

message 支持传入 VNode；当内容中包含响应式状态时，建议传入返回 VNode 的函数。

<template>
  <div class="demo-row">
    <el-button plain @click="openCommon">普通 VNode</el-button>
    <el-button plain @click="openDynamic">动态内容</el-button>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { Button as ElButton, MessageBox, Switch as ElSwitch } from '@szhn/dh-design-pc'


function openCommon() {
  MessageBox({
    title: 'VNode 示例',
    message: h('p', null, [
      h('span', null, 'MessageBox 的内容可以是 '),
      h('strong', { style: 'color: var(--el-color-primary);' }, 'VNode'),
    ]),
  })
}

function openDynamic() {
  const checked = ref<boolean | string | number>(false)

  MessageBox({
    title: '动态内容',
    message: () =>
      h(ElSwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (value: boolean | string | number) => {
          checked.value = value
        },
      }),
  })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

个性化

直接调用 MessageBox 方法并传入 options，可以对标题、按钮文案、按钮样式等进行完全自定义，同时支持通过 beforeClose 在关闭前执行逻辑。

<template>
  <el-button @click="open">个性化弹框</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Message, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox({
    title: '提交确认',
    message: '提交后将不可撤销，请确认您的操作。',
    showCancelButton: true,
    confirmButtonText: '提交中…',
    cancelButtonText: '再想想',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        setTimeout(() => {
          done()
          instance.confirmButtonLoading = false
        }, 1000)
      } else {
        done()
      }
    },
  })
    .then(() => Message({ type: 'success', message: '提交成功' }))
    .catch(() => {})
}
</script>

使用 HTML 片段

将 dangerouslyUseHTMLString 设置为 true 可将 message 作为 HTML 片段渲染。

<template>
  <el-button @click="open">HTML 内容</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.alert(
    '<strong>富文本</strong> 支持，可以在消息框中使用 <em style="color: var(--el-color-primary);">HTML</em> 片段',
    '提示',
    { dangerouslyUseHTMLString: true },
  )
}
</script>

区分取消与关闭

默认情况下，点击取消按钮与关闭图标都会进入相同的拒绝分支。设置 distinguishCancelAndClose 后，可区分两种操作。

<template>
  <el-button plain @click="open">区分取消与关闭</el-button>
</template>

<script lang="ts" setup>
import { Button as ElButton, Message, MessageBox } from '@szhn/dh-design-pc'


function open() {
  MessageBox.confirm('当前内容尚未保存，是否保存后继续？', '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '保存',
    cancelButtonText: '放弃修改',
  })
    .then(() => {
      Message({
        type: 'info',
        message: '已保存变更，准备继续后续操作。',
      })
    })
    .catch((action: string) => {
      Message({
        type: 'info',
        message: action === 'cancel'
          ? '已放弃修改，继续执行。'
          : '保持当前页面，不执行跳转。',
      })
    })
}
</script>

内容居中

将 center 设置为 true 即可让弹框内容居中展示。

<template>
  <el-button @click="open">居中布局</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.confirm('内容将以居中的方式展示', '提示', {
    center: true,
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).catch(() => {})
}
</script>

自定义图标

可通过 icon 传入任意 Vue 组件或 JSX 渲染函数，覆盖默认状态图标。

<template>
  <el-button plain @click="open">自定义图标</el-button>
</template>

<script lang="ts" setup>
import { markRaw } from 'vue'
import { Button as ElButton, Message, MessageBox } from '@szhn/dh-design-pc'
import { Delete } from '@szhn/dh-design-pc/icons'


function open() {
  MessageBox.confirm('该操作会永久删除这条记录，是否继续？', '警告', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning',
    icon: markRaw(Delete),
  })
    .then(() => {
      Message({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      Message({
        type: 'info',
        message: '已取消删除',
      })
    })
}
</script>

可拖放

设置 draggable 为 true 开启弹框拖拽能力。

<template>
  <el-button @click="open">可拖动弹框</el-button>
</template>

<script lang="ts" setup>
import { MessageBox, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  MessageBox.confirm('试试按住标题栏拖动', '提示', {
    draggable: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).catch(() => {})
}
</script>

全局方法

如果完整注册了组件库，实例上可直接使用 $msgbox、$alert、$confirm 与 $prompt。

应用上下文继承 (2.0.4)

MessageBox 支持在构造方法的第二个参数（变体方法为第四个参数）中传入 appContext，以继承当前应用上下文。

import { getCurrentInstance } from 'vue'
import { MessageBox } from '@szhn/dh-design-pc'

const { appContext } = getCurrentInstance()!
MessageBox({}, appContext)
MessageBox.alert('Hello DHdesign', '提示', {}, appContext)

按需引入

import { MessageBox } from '@szhn/dh-design-pc'

MessageBox.alert('操作成功', '提示')
MessageBox.confirm('确认删除该记录？', '警告')
MessageBox.prompt('请输入备注', '提示')

API

配置项（部分）

属性名	说明	类型	默认值
title	标题	string	''
message	正文内容	string / VNode / Function	—
type	消息类型（用于图标）	success / warning / info / error	''
icon	自定义图标	string / Component	—
showCancelButton	是否显示取消按钮	boolean	false
showConfirmButton	是否显示确定按钮	boolean	true
confirmButtonText	确定按钮文本	string	确定
cancelButtonText	取消按钮文本	string	取消
beforeClose	关闭前回调	Function	null
distinguishCancelAndClose	区分取消与关闭	boolean	false
center	是否居中	boolean	false
draggable	是否可拖动	boolean	false
dangerouslyUseHTMLString	是否解析 HTML	boolean	false
showInput	是否显示输入框	boolean	false
inputPattern / inputValidator / inputErrorMessage	输入校验	—	—

方法

名称	说明
MessageBox.alert(message, title?, options?)	打开 alert 框
MessageBox.confirm(message, title?, options?)	打开确认框
MessageBox.prompt(message, title?, options?)	打开输入框
MessageBox.close()	关闭当前打开的 MessageBox

更多配置参见 Element Plus MessageBox。

Message Box 消息弹出框 ​

消息提示 ​

确认消息 ​

提交内容 ​

使用 VNode ​

个性化 ​

使用 HTML 片段 ​

区分取消与关闭 ​

内容居中 ​

自定义图标 ​

可拖放 ​

全局方法 ​

应用上下文继承 (2.0.4) ​

按需引入 ​

API ​

配置项（部分） ​

方法 ​