消息提示 Message

全局消息提示，用于反馈用户操作结果。

基础使用

如果你完整注册了组件库，你可以以以下方式使用它：

• window.$message；
• Vue 组件内： getCurrentInstance().appContext.config.globalProperties.PixeliumVue.message；
• 从 @pixelium/web-vue 中导入。

按需引入时，也可以从 @pixelium/web-vue/es 中导入 Message 使用。

隐藏源代码

消息类型

消息有 'normal'（默认）、'info'、'success'、'warning'、'error'、'loading'、'sakura'、'notice'，多种类型，其中 'normal' 和 'sakura' 默认不展示图标。

隐藏源代码

消息位置

消息可以出现在左上、上方（默认）、右上、左下、右下、下方，6 个位置。

隐藏源代码

可关闭消息

closable 设置消息可关闭。

隐藏源代码

持续时间

duration 设置消息持续时间。

隐藏源代码

消息图标

icon 设置消息图标。

隐藏源代码

消息内容

消息内容支持传入 JSX 或者渲染函数。

隐藏源代码

自定义颜色

自定义主色，内部基于此生成完整色板，该色板优先级高于 type 属性提供的预设色版。详见 支持的颜色解析。

隐藏源代码

消息容器

MessageBox 组件是消息的容器，消息出现的位置由容器的 placement 决定。在以函数式创建的消息中，出现位置相同的消息都是同一个 MessageBox 的子组件。我们也提供了 MessageBox 的导出。

Message count: 0

隐藏源代码

API

MessageFunction

export type MessageFunction = {
	(options: ValidContent | MessageOptions): MessageReturn
} & {
	[key in MessageOptions['type'] & string]: (
		options: Omit<MessageOptions, 'type'> | string
	) => MessageReturn
}
declare const message: MessageFunction

ValidContent, ValidVNodeContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

MessageOptions

属性	类型	可选	默认值	描述	版本
content	ValidContent	是		消息内容。	0.0.0-beta
icon	ValidVNodeContent	是		消息图标。	0.0.0-beta
duration	number	是	3000	持续时间（ms）。	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	是	'normal'	消息类型。	0.0.0-beta
color	string	是		自定义主色，详见 支持的颜色解析。	0.0.0-beta
closable	boolean	是	false	是否可以关闭消息。	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	消息出现位置。	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	Deprecated 消息出现位置。	0.0.0-beta
root	string | HTMLElement	是	'body'	消息挂载元素。	0.0.0-beta

MessageReturn

属性	类型	可选	默认值	描述	版本
close	() => void	否		关闭当前消息。	0.0.0-beta
clear	() => void	否		清空当前 MessageBox 的所有消息。	0.0.0-beta
unmount	() => void	否		卸载当前 MessageBox。	0.2.0

MessageBoxProps

属性	类型	可选	默认值	描述	版本
messages	MessageProps[]	是		当前 MessageBox 的所有消息，需要使用 v-model。	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	消息出现位置。	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	Deprecated 消息出现位置。	0.0.0-beta
zIndex	number	是		MessageBox 的 z-index 样式。	0.0.0-beta
root	string | HTMLElement	是	'body'	消息挂载元素。	0.0.0-beta

MessageBoxEvents

事件	参数	描述	版本
update:messages	value: MessageProps[]	v-model 更新 messages 属性。	0.0.0-beta
close	id: string | number | symbol	关闭消息的回调。	0.0.0-beta

MessageBoxExpose

属性	类型	可选	默认值	描述	版本
close	(id: number | string | symbol) => void	否		关闭消息。	0.0.0-beta

MessageProps

属性	类型	可选	默认值	描述	版本
content	ValidContent	是		消息内容。	0.0.0-beta
icon	ValidVNodeContent	是		消息图标。	0.0.0-beta
duration	number	是	3000	持续时间（ms）。	0.0.0-beta
id	number | string | symbol	是		消息的唯一标识，默认使用随机的 nanoid。	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	是	'normal'	消息类型。	0.0.0-beta
color	string	是		自定义主色，详见 支持的颜色解析。	0.0.0-beta
closable	boolean	是	false	是否可以关闭消息。	0.0.0-beta