MessageBox 消息框

用于确认、警告等阻塞式反馈。

基础用法

vue

<template>
  <x-space>
    <x-button status="warning" @click="openConfirm">删除确认</x-button>
    <x-button @click="openInfo">信息提示</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { MessageBox } from 'x-next';

const openConfirm = () => {
  MessageBox.warning('确认删除吗？', '删除后数据不可恢复')
    .ok(() => console.log('ok'))
    .cancel(() => console.log('cancel'));
};

const openInfo = () => {
  MessageBox.info('更新说明', '本次操作不会影响已有数据');
};
</script>

消息类型

vue

<template>
  <x-space wrap>
    <x-button @click="openType('info')">Info</x-button>
    <x-button status="success" @click="openType('success')">Success</x-button>
    <x-button status="warning" @click="openType('warning')">Warning</x-button>
    <x-button status="strong" @click="openType('strong')">Strong</x-button>
    <x-button status="danger" @click="openType('error')">Error</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { MessageBox } from 'x-next';
import type { MessageBoxStaticMethod } from 'x-next';

const openType = (type: MessageBoxStaticMethod) => {
  MessageBox[type](`${type} 标题`, `${type} 内容`);
};
</script>

异步关闭

vue

<template>
  <x-space>
    <x-button type="primary" @click="openAsyncOk">异步确认</x-button>
    <x-button @click="openBlockedCancel">阻止取消</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { MessageBox } from 'x-next';

const openAsyncOk = () => {
  MessageBox({
    title: '提交确认',
    content: '确认提交当前表单吗？',
    type: 'info',
    okText: '提交',
    beforeOnOk: async () => {
      await new Promise((resolve) => window.setTimeout(resolve, 1200));
      return true;
    },
  });
};

const openBlockedCancel = () => {
  MessageBox({
    title: '当前不能取消',
    content: 'beforeOnCancel 返回 false 时弹窗会保持打开',
    type: 'warning',
    beforeOnCancel: () => false,
  });
};
</script>

手动控制

vue

<template>
  <x-space>
    <x-button @click="openManualClose">2 秒后关闭</x-button>
    <x-button @click="openManualUpdate">倒计时更新</x-button>
    <x-button @click="closeAll">关闭全部</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { MessageBox } from 'x-next';

const openManualClose = () => {
  const instance = MessageBox({
    title: '手动关闭',
    content: '这个消息框会在 2 秒后关闭',
    type: 'success',
  });
  window.setTimeout(() => instance.close(), 2000);
};

const openManualUpdate = () => {
  let seconds = 3;
  const instance = MessageBox.success('倒计时', `还有 ${seconds} 秒关闭`);
  const timer = window.setInterval(() => {
    seconds -= 1;
    instance.update({ content: `还有 ${seconds} 秒关闭` });
    if (seconds <= 0) {
      window.clearInterval(timer);
      instance.close();
    }
  }, 1000);
};

const closeAll = () => MessageBox.destroyAll();
</script>

页脚和按钮

vue

<template>
  <x-space>
    <x-button @click="openNoFooter">隐藏底部</x-button>
    <x-button @click="openOnlyOk">只保留确认</x-button>
    <x-button @click="openCustomFooter">自定义底部</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { MessageBox } from 'x-next';

const openNoFooter = () => {
  MessageBox({
    title: '无底部区域',
    content: 'footer=false 时不会显示底部按钮',
    type: 'info',
    footer: false,
  });
};

const openOnlyOk = () => {
  MessageBox.success('保存成功', '只展示确认按钮').update({ hideCancel: true });
};

const openCustomFooter = () => {
  MessageBox({
    title: '自定义底部',
    content: 'footer 可以接收渲染函数',
    type: 'strong',
    footer: ({ cancel, ok }) =>
      h('div', { style: 'display:flex;gap:8px;justify-content:flex-end;' }, [
        h('button', { onClick: cancel }, '稍后'),
        h('button', { onClick: ok }, '立即处理'),
      ]),
  });
};
</script>

自定义位置和容器

vue

<template>
  <x-space>
    <x-button @click="openTopMessageBox">距离顶部</x-button>
    <x-button @click="openLocalMessageBox">局部容器</x-button>
  </x-space>
  <div id="message-box-local-container" class="message-box-local-container"></div>
</template>

<script setup lang="ts">
import { MessageBox } from 'x-next';

const openTopMessageBox = () => {
  MessageBox({
    title: '自定义位置',
    content: '设置 top 后不再垂直居中',
    type: 'info',
    top: 80,
  });
};

const openLocalMessageBox = () => {
  MessageBox({
    title: '局部容器',
    content: '挂载到指定容器',
    type: 'success',
    renderTo: '#message-box-local-container',
  });
};
</script>

按需导入

import { MessageBox } from 'x-next';

Methods

方法	说明	参数	返回值
`MessageBox(options)`	显示自定义消息框	`MessageBoxOptions`	`MessageBoxReturn`
`MessageBox.info(title, content?)`	信息消息框	`MessageBoxContent, MessageBoxContent?`	`MessageBoxMethodReturn`
`MessageBox.success(title, content?)`	成功消息框	`MessageBoxContent, MessageBoxContent?`	`MessageBoxMethodReturn`
`MessageBox.warning(title, content?)`	警告消息框	`MessageBoxContent, MessageBoxContent?`	`MessageBoxMethodReturn`
`MessageBox.strong(title, content?)`	强调消息框	`MessageBoxContent, MessageBoxContent?`	`MessageBoxMethodReturn`
`MessageBox.error(title, content?)`	错误消息框	`MessageBoxContent, MessageBoxContent?`	`MessageBoxMethodReturn`
`MessageBox.destroyAll()`	关闭全部消息框	`-`	`void`

MessageBoxOptions

参数	说明	类型	默认值
`title`	标题	`MessageBoxContent`	`-`
`type`	消息类型	`'info' \| 'success' \| 'warning' \| 'strong' \| 'error'`	`'success'`
`content`	正文内容	`MessageBoxContent`	`-`
`footer`	自定义底部；`false` 时隐藏底部	`boolean \| VNode \| (scoped) => MessageBoxRenderResult`	默认按钮
`okText`	确认按钮文案	`string`	`'确认'`
`cancelText`	取消按钮文案	`string`	`'取消'`
`mask`	是否显示遮罩	`boolean`	`true`
`maskToClose`	点击遮罩是否关闭	`boolean`	`false`
`onOk`	点击确认回调	`(event: Event) => void`	`-`
`beforeOnOk`	确认前拦截	`() => boolean \| Promise<boolean>`	`-`
`onCancel`	点击取消回调	`(event: Event) => void`	`-`
`beforeOnCancel`	取消前拦截	`() => boolean \| Promise<boolean>`	`-`
`width`	宽度	`string \| number`	`360`
`height`	高度	`string \| number`	`'auto'`
`top`	距离顶部位置	`string \| number`	`0`
`center`	是否居中	`boolean`	`true`
`renderTo`	挂载容器，找不到时回退到 body	`string \| HTMLElement`	`'body'`
`hideCancel`	是否隐藏取消按钮	`boolean`	`false`
`hideOk`	是否隐藏确认按钮	`boolean`	`false`
`closable`	是否显示右上角关闭按钮	`boolean`	`true`
`popupClass`	弹层自定义类名	`string`	`-`

返回值

方法	说明	参数
`close()`	关闭当前消息框	`-`
`update(options)`	更新当前消息框配置	`Partial<MessageBoxOptions>`

链式回调

方法	说明	参数
`ok(callback)`	注册确认回调	`() => void`
`ok(before, callback)`	注册确认前拦截与确认回调	`() => boolean \| Promise<boolean>, () => void`
`cancel(callback)`	注册取消回调	`() => void`
`cancel(before, callback)`	注册取消前拦截与取消回调	`() => boolean \| Promise<boolean>, () => void`

Types

type MessageBoxContent = string | number | VNode | RenderFunction;
type MessageBoxRenderResult = string | number | VNode | VNode[] | null | undefined;

MessageBox 消息框 ​

基础用法 ​

消息类型 ​

异步关闭 ​

手动控制 ​

页脚和按钮 ​

自定义位置和容器 ​

按需导入 ​

Methods ​

MessageBoxOptions ​

返回值 ​

链式回调 ​

Types ​

MessageBox 消息框

基础用法

消息类型

异步关闭

手动控制

页脚和按钮

自定义位置和容器

按需导入

Methods

MessageBoxOptions

返回值

链式回调

Types