Message 全局提示

全局展示操作反馈信息。

Hooks 调用（推荐）

通过 message.useMessage 创建支持读取 context 的 contextHolder。请注意，我们推荐通过顶层注册的方式代替 message 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。

<template>
  <context-holder />
  <a-button type="primary" @click="info">Display normal message</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
  messageApi.info('Hello, Ant Design Vue!');
};
</script>

普通提示

信息提醒反馈。

<template>
  <a-button type="primary" @click="info">Display normal message</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const info = () => {
  message.info('This is a normal message');
};
</script>

修改延时

自定义时长 10s，默认时长为 3s。

<template>
  <a-button @click="success">Customized display duration</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const success = () => {
  message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
};
</script>

其他提示类型

包括成功、失败、警告。

<template>
  <a-space>
    <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 setup>
import { message } from 'ant-design-vue';
const success = () => {
  message.success('This is a success message');
};
const error = () => {
  message.error('This is an error message');
};
const warning = () => {
  message.warning('This is a warning message');
};
</script>

加载中

进行全局 loading，异步自行移除。

<template>
  <a-button @click="success">Display a loading indicator</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const success = () => {
  const hide = message.loading('Action in progress..', 0);
  setTimeout(hide, 2500);
};
</script>

Promise 接口

可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。

<template>
  <a-button @click="success">Display a sequence of message</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const success = () => {
  message
    .loading('Action in progress..', 2.5)
    .then(
      () => message.success('Loading finished', 2.5),
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      () => {},
    )
    .then(() => message.info('Loading finished is finished', 2.5));
};
</script>

自定义样式

使用 style 和 class 来定义样式。

<template>
  <a-button @click="success">Customized style</a-button>
</template>
<script setup>
import { message } from 'ant-design-vue';
const success = () => {
  message.success({
    content: () => 'This is a prompt message with custom className and style',
    class: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });
};
</script>
<style>
.custom-class {
  color: red;
}
</style>

API

组件提供了一些静态方法，使用方式和参数如下：

• message.success(content, [duration], onClose)
• message.error(content, [duration], onClose)
• message.info(content, [duration], onClose)
• message.warning(content, [duration], onClose)
• message.warn(content, [duration], onClose) // alias of warning
• message.loading(content, [duration], onClose)

参数	说明	类型	默认值
content	提示内容	string | VNode | () => VNode	-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
onClose	关闭时触发的回调函数	function	-

组件同时提供 promise 接口

• message[level](content, [duration]).then(afterClose)
• message[level](content, [duration], onClose).then(afterClose)

其中message[level] 是组件已经提供的静态方法。then 接口返回值是 Promise 。

也可以对象的形式传递参数：

• message.open(config)
• message.success(config)
• message.error(config)
• message.info(config)
• message.warning(config)
• message.warn(config) // alias of warning
• message.loading(config)

config 对象属性如下：

参数	说明	类型	默认值
class	自定义 CSS class	string	-
content	提示内容	string | VNode | ()=> VNode	-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
icon	自定义图标	VNode | () => VNode	-
key	当前提示的唯一标志	string | number	-
style	自定义内联样式	CSSProperties	-
onClick	点击 message 时触发的回调函数	function	-
onClose	关闭时触发的回调函数	function	-

全局方法

还提供了全局配置和全局销毁方法：

• message.config(options)
• message.destroy()
• message.useMessage()

message.config

message.config({
  top: `100px`,
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
});

参数	说明	类型	默认值
duration	默认自动关闭延时，单位秒	number	3
getContainer	配置渲染节点的输出位置	() => HTMLElement	() => document.body
maxCount	最大显示数, 超过限制时，最早的消息会被自动关闭	number	-
prefixCls	消息节点的 className 前缀	string	ant-message
rtl	是否开启 RTL 模式	boolean	false
top	消息距离顶部的位置	string	8px