Message 消息提示

在页面顶部展示非阻塞反馈。

基础用法

<template>
  <div>
    <div class="au-doc-row">
      <AuButton
        v-for="example in messageExamples"
        :key="example.label"
        :type="example.buttonType"
        :plain="example.buttonType !== 'default'"
        @click="showMessage(example)"
      >
        {{ example.label }}
      </AuButton>
      <AuButton type="primary" @click="showGroupedMessage">连续发送 3 次</AuButton>
      <AuButton @click="AuMessage.closeAll()">关闭全部</AuButton>
    </div>
  </div>
</template>
<script setup>
import { AuButton, AuMessage } from 'aurora-plus';
const messageExamples = [
  {
    label: '普通消息',
    method: 'info',
    buttonType: 'default',
    options: { message: '新的同步任务已经开始', duration: 2200 },
  },
  {
    label: '成功消息',
    method: 'success',
    buttonType: 'success',
    options: { message: '项目设置保存成功', duration: 2200 },
  },
  {
    label: '警告消息',
    method: 'warning',
    buttonType: 'warning',
    options: { message: '磁盘剩余空间不足 10%', showClose: true },
  },
  {
    label: '错误消息',
    method: 'error',
    buttonType: 'danger',
    options: { message: '无法连接到远程仓库', duration: 3000, showClose: true },
  },
];
function showMessage(example) {
  AuMessage[example.method](example.options);
}
function showGroupedMessage() {
  const options = { message: '发现可用更新', grouping: true, showClose: true };
  AuMessage.info(options);
  AuMessage.info(options);
  AuMessage.info(options);
}
</script>

调用方式

import { AuMessage } from 'aurora-plus';

const handler = AuMessage.success('保存成功');
handler.close();

AuMessage.warning({
  message: '请检查输入内容',
  duration: 3000,
  showClose: true,
});

Message API

方法

方法	参数	返回值	说明
AuMessage(options)	string / number / AuMessageOptions	AuMessageHandler	打开消息；未指定类型时为 info
AuMessage.success(options)	同上	AuMessageHandler	打开成功消息
AuMessage.warning(options)	同上	AuMessageHandler	打开警告消息
AuMessage.info(options)	同上	AuMessageHandler	打开信息消息
AuMessage.error(options)	同上	AuMessageHandler	打开错误消息
AuMessage.closeAll()	—	void	关闭当前全部消息

Options

配置	说明	类型	默认值
message	消息正文	string / number	必填
type	消息类型	success / warning / info / error	info
duration	显示时长，单位 ms；0 表示常驻	number	2000
showClose	是否显示关闭按钮	boolean	false
grouping	是否合并相同类型与正文并累加次数	boolean	false
offset	消息容器距视口顶部的距离，单位 px	number	20
onClose	消息关闭后的回调	() => void	—