Message 消息提示

全局展示操作反馈信息。

基础用法

四种状态的消息提示，每条消息都有关闭按钮。

import { Message } from '@nurdunui/nur-ui'

Message.info({ message: '这是一条信息提示', showClose: true })
Message.success({ message: '操作成功', showClose: true })
Message.warning({ message: '警告：请注意检查数据', showClose: true })
Message.danger({ message: '错误：操作失败', showClose: true })

朴素消息

plain 属性开启透明背景、彩色边框的朴素风格。

Message.info({ message: '朴素信息提示', plain: true, showClose: true })
Message.success({ message: '朴素成功提示', plain: true, showClose: true })

可关闭

showClose 显示关闭按钮，duration: 0 表示不自动关闭。duration 大于 0 时消息会在指定时间后自动消失，同时也可手动关闭。

Message.info({ message: '可关闭的消息提示', showClose: true, duration: 0 })
Message.warning({ message: '这条消息10秒后才消失', showClose: true, duration: 10000 })

关闭前确认

beforeClose 回调在关闭前执行，返回 false 则阻止关闭。

// confirmDialog 返回 Promise<boolean>，用户点确定返回 true，点取消返回 false
Message.danger({
  message: '确定要删除这条记录吗？',
  showClose: true,
  duration: 0,
  beforeClose: async () => {
    return await confirmDialog('确认关闭这条消息？')
  },
})

带头像

通过 avatar 属性在消息左侧展示头像。

Message.info({
  message: '欢迎回来，您的资料已更新',
  avatar: 'https://avatars.githubusercontent.com/u/1?v=4',
  showClose: true,
  duration: 0,
})

组件结构

根元素 <div class="my-message"> 按顺序包含：头像 __avatar（可选）、类型图标 __icon、消息文字 __text、关闭按钮 __close（可选）。消息通过 JS 函数式调用动态创建并挂载到 body。

CSS 类名

类名	说明
.my-message	根元素
.my-message--info	信息类型
.my-message--success	成功类型
.my-message--warning	警告类型
.my-message--danger	错误类型
.is-plain	朴素风格（透明背景）
.my-message__avatar	头像图片
.my-message__icon	类型图标
.my-message__icon--info	信息图标
.my-message__icon--success	成功图标
.my-message__icon--warning	警告图标
.my-message__icon--danger	错误图标
.my-message__text	消息文字
.my-message__close	关闭按钮

API

Message 提供函数式调用和完整配置项。

方法	说明
Message.info(msg)	信息提示
Message.success(msg)	成功提示
Message.warning(msg)	警告提示
Message.danger(msg)	错误提示
Message.closeAll()	关闭所有消息

msg 可以是 string，也可以是完整的 MessageOptions 对象：

属性	说明	类型	默认值
message	消息文字	string	—
type	消息类型	'info' | 'success' | 'warning' | 'danger'	'info'
duration	显示时间(ms)，0 为不自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
plain	朴素风格（透明背景）	boolean	false
avatar	头像图片地址	string	—
group	消息分组，相同组会合并	string	—
zIndex	自定义层级	number	—
onClose	关闭时的回调函数	() => void	—
beforeClose	关闭前回调，返回 false 阻止关闭	() => boolean | Promise<boolean>	—