Message Box 消息弹出框

Message Box 用于展示需要用户确认或输入的模态消息。VISTA B 直接使用 Element Plus 的 ElMessageBox 服务，适合删除确认、风险提示、二次确认和简单文本输入等场景。

基础用法

使用 ElMessageBox.alert 展示只需要确认的消息弹框。

vue

<template>
  <el-button type="primary" @click="open">打开消息弹框</el-button>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('项目配置已保存，可以继续编辑或返回列表。', '操作提示', {
    confirmButtonText: '知道了',
    type: 'success',
  })
}
</script>

确认消息

使用 ElMessageBox.confirm 展示带取消按钮的确认弹框。确认时 Promise resolve，取消或关闭时 Promise reject。

vue

<template>
  <el-button type="danger" @click="remove">删除项目</el-button>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'

const remove = () => {
  ElMessageBox.confirm('删除后数据不可恢复，是否继续？', '删除项目', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    confirmButtonType: 'danger',
    type: 'warning',
  })
    .then(() => {
      ElMessage.success('已删除')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}
</script>

提交内容

使用 ElMessageBox.prompt 展示输入框。可以通过 inputPattern 或 inputValidator 校验输入内容。

vue

<template>
  <el-button type="primary" @click="submit">提交审批备注</el-button>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'

const submit = () => {
  ElMessageBox.prompt('请输入本次审批备注', '提交审批', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputPlaceholder: '审批备注',
    inputPattern: /\S+/,
    inputErrorMessage: '备注不能为空',
  }).then(({ value }) => {
    ElMessage.success(`已提交：${value}`)
  })
}
</script>

使用 HTML 字符串

设置 dangerouslyUseHTMLString 后，message 会被当作 HTML 片段渲染。该能力只应使用可信内容。

vue

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert(
    '<strong>报价单已生成</strong><br />请确认金额和交付日期后再发送客户。',
    '生成成功',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '去确认',
      type: 'success',
    },
  )
}
</script>

自定义内容

message 支持传入 VNode，也可以传入函数并接收 confirm、cancel、close 操作方法。

vue

<script setup lang="ts">
import { h } from 'vue'
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox({
    title: '分配成员',
    message: h('div', { style: 'line-height: 1.7' }, [
      h('p', { style: 'margin: 0 0 8px' }, '即将把 3 个待办任务分配给当前成员。'),
      h('strong', { style: 'color: var(--el-color-primary)' }, '确认后会发送站内通知。'),
    ]),
    confirmButtonText: '分配',
    cancelButtonText: '稍后处理',
    showCancelButton: true,
    type: 'info',
  })
}
</script>

自定义关闭前逻辑

beforeClose 可以拦截关闭流程，适合在确认按钮中执行异步操作或展示 loading 状态。

vue

<script setup lang="ts">
import { ElMessage, ElMessageBox, type Action, type MessageBoxState } from 'element-plus'

const open = () => {
  ElMessageBox.confirm('发布后将同步到线上环境，是否继续？', '发布版本', {
    confirmButtonText: '发布',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: (action: Action, instance: MessageBoxState, done: () => void) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '发布中...'
        setTimeout(() => {
          done()
          ElMessage.success('发布成功')
        }, 1200)
        return
      }

      done()
    },
  })
}
</script>

区分取消与关闭

设置 distinguishCancelAndClose 后，点击取消按钮会返回 cancel，点击关闭按钮或遮罩会返回 close。

vue

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm('页面上还有未保存的修改，确定要离开吗？', '离开编辑', {
    confirmButtonText: '保存并离开',
    cancelButtonText: '放弃更改',
    distinguishCancelAndClose: true,
    type: 'warning',
  })
    .then(() => {
      ElMessage.success('已保存')
    })
    .catch((action: string) => {
      ElMessage.info(action === 'close' ? '继续编辑' : '已放弃修改')
    })
}
</script>

居中布局

设置 center 后标题、内容和按钮会居中展示，适合更强调结果反馈的场景。

vue

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('本次巡检未发现异常，可以继续执行下一步。', '巡检完成', {
    center: true,
    confirmButtonText: '知道了',
    type: 'success',
  })
}
</script>

自定义图标

通过 icon 替换默认类型图标。传入组件时建议使用 markRaw，避免组件被响应式代理。

vue

<script setup lang="ts">
import { markRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

const open = () => {
  ElMessageBox.alert('该策略会影响所有子账号，请确认后继续。', '策略提示', {
    icon: markRaw(InfoFilled),
    confirmButtonText: '确认',
    type: 'info',
  })
}
</script>

可拖拽弹框

设置 draggable 后可以拖拽弹框。设置 overflow 后，拖拽时弹框可以超出视口边界。

vue

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('按住标题栏可以拖动弹框位置。', '可拖拽弹框', {
    draggable: true,
    overflow: true,
    confirmButtonText: '完成',
  })
}
</script>

API

MessageBox 方法

方法	说明	类型
`ElMessageBox(options)`	打开一个消息弹框	`Function`
`ElMessageBox.alert(message, title, options)`	打开提示弹框，仅展示确认按钮	`Function`
`ElMessageBox.confirm(message, title, options)`	打开确认弹框，默认展示确认和取消按钮	`Function`
`ElMessageBox.prompt(message, title, options)`	打开输入弹框，默认展示输入框、确认和取消按钮	`Function`
`ElMessageBox.close()`	关闭当前所有 MessageBox	`Function`

MessageBox 配置

属性	说明	类型	默认值
`title`	弹框标题	`string`	`-`
`message`	弹框内容	`string \| VNode \| function`	`-`
`type`	消息类型，用于显示默认图标	`primary` / `success` / `warning` / `info` / `error`	`-`
`icon`	自定义图标组件	`string \| Component`	`-`
`closeIcon`	自定义关闭图标组件	`string \| Component`	`-`
`customClass`	弹框自定义 class	`string`	`-`
`customStyle`	弹框自定义内联样式	`object`	`{}`
`modal`	是否显示遮罩	`boolean`	`true`
`modalClass`	遮罩自定义 class	`string`	`-`
`lockScroll`	是否在弹框出现时锁定 body 滚动	`boolean`	`true`
`showClose`	是否显示右上角关闭按钮	`boolean`	`true`
`closeOnClickModal`	是否可通过点击遮罩关闭	`boolean`	`true`
`closeOnPressEscape`	是否可通过 ESC 关闭	`boolean`	`true`
`closeOnHashChange`	hash 变化时是否关闭弹框	`boolean`	`true`
`showConfirmButton`	是否显示确认按钮	`boolean`	`true`
`showCancelButton`	是否显示取消按钮	`boolean`	`false`
`confirmButtonText`	确认按钮文本	`string`	`确定`
`cancelButtonText`	取消按钮文本	`string`	`取消`
`confirmButtonType`	确认按钮类型	`primary` / `success` / `warning` / `danger` / `info` / `text`	`primary`
`cancelButtonType`	取消按钮类型	`primary` / `success` / `warning` / `danger` / `info` / `text`	`-`
`confirmButtonLoadingIcon`	确认按钮 loading 图标	`string \| Component`	`Loading`
`cancelButtonLoadingIcon`	取消按钮 loading 图标	`string \| Component`	`Loading`
`confirmButtonClass`	确认按钮自定义 class	`string`	`-`
`cancelButtonClass`	取消按钮自定义 class	`string`	`-`
`confirmButtonDisabled`	是否禁用确认按钮	`boolean`	`false`
`buttonSize`	自定义按钮尺寸	`large` / `default` / `small`	`-`
`roundButton`	是否使用圆角按钮	`boolean`	`false`
`center`	是否居中布局	`boolean`	`false`
`draggable`	是否可拖拽弹框	`boolean`	`false`
`overflow`	拖拽时是否允许弹框超出视口	`boolean`	`false`
`dangerouslyUseHTMLString`	是否将 `message` 当作 HTML 字符串处理	`boolean`	`false`
`distinguishCancelAndClose`	是否区分取消和关闭操作	`boolean`	`false`
`beforeClose`	弹框关闭前的回调，会暂停关闭流程	`function`	`-`
`callback`	若不使用 Promise，可通过回调接收关闭动作	`function`	`-`
`appendTo`	指定弹框挂载的元素	`HTMLElement \| string`	`body`

Prompt 配置

属性	说明	类型	默认值
`showInput`	是否显示输入框	`boolean`	`false`
`inputPlaceholder`	输入框占位文本	`string`	`-`
`inputValue`	输入框初始值	`string`	`-`
`inputType`	输入框类型	`string`	`text`
`inputPattern`	输入框校验正则	`RegExp`	`-`
`inputValidator`	输入框校验函数，返回 `false` 或错误文本时校验失败	`function`	`-`
`inputErrorMessage`	输入框校验失败时的提示文本	`string`	`-`

Promise 返回

操作	结果	说明
点击确认	`resolve('confirm')`	`alert` 和 `confirm` 默认返回确认动作
输入后确认	`resolve({ value, action })`	`prompt` 会返回输入值和动作
点击取消	`reject('cancel')`	可在 `catch` 中处理取消操作
点击关闭	`reject('close')`	仅在 `distinguishCancelAndClose` 为 `true` 时区分关闭动作

Message Box 消息弹出框 ​

基础用法 ​

确认消息 ​

提交内容 ​

使用 HTML 字符串 ​

自定义内容 ​

自定义关闭前逻辑 ​

区分取消与关闭 ​

居中布局 ​

自定义图标 ​

可拖拽弹框 ​

API ​

MessageBox 方法 ​

MessageBox 配置 ​

Prompt 配置 ​

Promise 返回 ​