Message

🌏 Translated with the assistance of DeepSeek and ChatGPT

Global message prompt, used to feedback the result of user operations.

Basic Usage

If you have fully registered the component library, you can use it in the following ways:

• window.$message;
• Inside a Vue component: getCurrentInstance().appContext.config.globalProperties.PixeliumVue.message;
• Import from @pixelium/web-vue.

When importing on-demand, you can also import Message from @pixelium/web-vue/es for use.

<template>
	<px-space>
		<px-button @click="callByWindow">Window</px-button>
		<px-button @click="callByCurrentInstance">Current Instance</px-button>
		<px-button @click="callByOnDemandImport">On-demand Import</px-button>
	</px-space>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import { Message } from '@pixelium/web-vue/es'
const instance = getCurrentInstance()

const callByWindow = () => {
	$message('Global Message')
}
const callByCurrentInstance = () => {
	instance.appContext.config.globalProperties.PixeliumVue.message('Global Message')
}
const callByOnDemandImport = () => {
	Message('Global Message')
}
</script>

Message Types

Messages come in 7 types: 'normal' (default), 'info', 'success', 'warning', 'error', 'loading', and 'sakura'. Among them, 'normal' and 'sakura' do not display icons by default.

<template>
	<px-space>
		<px-button @click="callMessage('info')">Info</px-button>
		<px-button theme="success" @click="callMessage('success')">Success</px-button>
		<px-button theme="warning" @click="callMessage('warning')">Warning</px-button>
		<px-button theme="danger" @click="callMessage('error')">Error</px-button>
		<px-button color="#909399" @click="callMessage('loading')">Loading</px-button>
		<px-button theme="sakura" @click="callMessage('sakura')">Sakura</px-button>
		<px-button theme="info" @click="callMessage('normal')">Normal</px-button>
	</px-space>
</template>
<script lang="ts" setup>
const callMessage = (type: string) => {
	const text = type.slice(0, 1).toUpperCase() + type.slice(1)
	$message[type](`${text} message`)
}
</script>

Message Placements

Messages can appear in 6 placements: top-left, top (default), top-right, bottom-left, bottom-right, and bottom.

<template>
	<px-space direction="vertical">
		<px-space>
			<px-button theme="info" @click="callMessage('top-left')">Top Left</px-button>
			<px-button theme="info" @click="callMessage('top')">Top</px-button>
			<px-button theme="info" @click="callMessage('top-right')">Top Right</px-button>
		</px-space>
		<px-space>
			<px-button theme="info" @click="callMessage('bottom-left')">Bottom Left</px-button>
			<px-button theme="info" @click="callMessage('bottom')">Bottom</px-button>
			<px-button theme="info" @click="callMessage('bottom-right')">Bottom Right</px-button>
		</px-space>
	</px-space>
</template>
<script lang="ts" setup>
const textMap: Record<string, string> = {
	'top-eft': 'Top Left',
	top: 'Top',
	'top-right': 'Top Right',
	'bottom-left': 'Bottom Left',
	bottom: 'Bottom',
	'bottom-right': 'Bottom Right'
}
const callMessage = (placement: string) => {
	$message.info({
		content: `${textMap[placement]} Message`,
		placement
	})
}
</script>

Closable Messages

Set closable to make the message closable.

<template>
	<px-space>
		<px-button @click="callMessage('info')">Info, Closable</px-button>
		<px-button theme="success" @click="callMessage('success')">Success, Closable</px-button>
		<px-button theme="warning" @click="callMessage('warning')">Warning, Closable</px-button>
		<px-button theme="danger" @click="callMessage('error')">Error, Closable</px-button>
		<px-button color="#909399" @click="callMessage('loading')">Loading, Closable</px-button>
		<px-button theme="sakura" @click="callMessage('sakura')">Sakura, Closable</px-button>
		<px-button theme="info" @click="callMessage('normal')">Normal, Closable</px-button>
	</px-space>
</template>
<script lang="ts" setup>
const callMessage = (type: string) => {
	const text = type.slice(0, 1).toUpperCase() + type.slice(1)
	$message[type]({
		content: `${text} message, closable`,
		closable: true
	})
}
</script>

Duration

Set the duration of the message with duration.

<template>
	<px-space>
		<px-button @click="call(1000)">1s</px-button>
		<px-button @click="call(3000)">3s</px-button>
		<px-button @click="call(10000)">10s</px-button>
	</px-space>
</template>
<script lang="ts" setup>
const call = (duration: number) => {
	$message({
		content: `Message with Duration of ${duration}ms...`,
		duration: duration
	})
}
</script>

Message Icons

Set the message icon with icon.

<template>
	<px-button @click="call">Icon</px-button>
</template>
<script lang="ts" setup>
import { IconMinds } from '@pixelium/web-vue/icon-hn/es'
import { h } from 'vue'
const call = () => {
	$message.info({
		content: 'Minds Icon',
		icon: () => h(IconMinds)
	})
}
</script>

Message Content

Message content supports JSX or render functions.

<template>
	<px-button @click="call" theme="success">Content</px-button>
</template>
<script lang="ts" setup>
import { h } from 'vue'
import { Button } from '@pixelium/web-vue'
const call = () => {
	$message.info({
		content: () => h('div', {}, ['It can be a ', h(Button, {}, 'Button')])
	})
}
</script>

Custom Colors

Customize the primary color. The internal system generates a complete color palette based on this, which has a higher priority than the preset color palette provided by the info property. It supports CSS-like 'rgb(r, g, b)' and 'rgba(r, g, b, a)' strings, as well as 3, 4, 6, and 8-digit hexadecimal numbers.

<template>
	<px-space>
		<px-button color="#409EFF" @click="call('#409EFF')">#409EFF Color</px-button>
		<px-button color="#FAE13C" @click="call('#FAE13C')">#FAE13C Color</px-button>
		<px-button color="#E956AE" @click="call('#E956AE')">#E956AE Color</px-button>
		<px-button color="#909399" @click="call('#909399')">#909399 Color</px-button>
	</px-space>
</template>
<script lang="ts" setup>
const call = (color: string) => {
	$message({
		content: `${color}`,
		color
	})
}
</script>

Message Container

The MessageBox component is the container for messages. The position of the message is determined by the container's placement. In functionally created messages, messages with the same position are sub-components of the same MessageBox. We also provide an export for MessageBox.

<template>
	<div>
		<px-message-box v-model:messages="messages"></px-message-box>
		<px-button @click="pushMessage">Add Message</px-button>
		<div>
			{{ messages.map((e: MessageProps) => e.content).join('\n') }}
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { MessageProps } from '@pixelium/web-vue/es/message/type.d.ts'
const messages = ref<MessageProps[]>([])

let id = 0

const pushMessage = () => {
	messages.value.push({
		id: id,
		content: `Message ${id}`
	})
	id++
}
</script>

API

MessageFunction

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

ValidContent, ValidVNodeContent

type ValidContent = string | (() => VNode | string | JSX.Element)
type ValidVNodeContent = () => VNode | JSX.Element

MessageOptions

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	True		Message content.	0.0.0-beta
icon	ValidVNodeContent	True		Message icon.	0.0.0-beta
duration	number	True	3000	Duration (ms).	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura'	True	'normal'	Message type.	0.0.0-beta
color	string	True		Custom primary color. The internal system generates a complete color palette based on this, which has a higher priority than the preset color palette provided by info property. It supports CSS-like 'rgb(r, g, b)' and 'rgba(r, g, b, a)' strings, as well as 3, 4, 6, and 8-digit hexadecimal numbers.	0.0.0-beta
closable	boolean	True	false	Whether the message can be closed.	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	The position where the message appears.	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Deprecated The position where the message appears.	0.0.0-beta
root	string | HTMLElement	True	'body'	The element where the message is mounted.	0.0.0-beta

MessageReturn

Attribute	Type	Optional	Default	Description	Version
close	() => void	False		Close the current message.	0.0.0-beta
clear	() => void	False		Clear all messages in the current MessageBox.	0.0.0-beta

MessageBoxProps

Attribute	Type	Optional	Default	Description	Version
messages	MessageProps[]	False		All messages in the current MessageBox.	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	The position where the message appears.	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Deprecated The position where the message appears.	0.0.0-beta
zIndex	number	True		The z-index style of MessageBox.	0.0.0-beta
root	string | HTMLElement	True	'body'	The element where the message is mounted.	0.0.0-beta

MessageBoxEvents

Event	Parameter	Description	Version
update:messages	value: MessageProps[]	v-model updates the messages property.	0.0.0-beta
close	id: string | number | symbol	Callback for closing the message.	0.0.0-beta

MessageBoxExpose

Attribute	Type	Optional	Default	Description	Version
close	(id: number | string | symbol) => void	False		Close the message.	0.0.0-beta

MessageProps

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	True		Message content.	0.0.0-beta
icon	ValidVNodeContent	True		Message icon.	0.0.0-beta
duration	number	True	3000	Duration (ms).	0.0.0-beta
id	number | string | symbol	True		The unique identifier for the message. A random nanoid is used by default.	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura'	True	'normal'	Message type.	0.0.0-beta
color	string	True		Custom primary color. The internal system generates a complete color palette based on this, which has a higher priority than the preset color palette provided by info property. It supports CSS-like 'rgb(r, g, b)' and 'rgba(r, g, b, a)' strings, as well as 3, 4, 6, and 8-digit hexadecimal numbers.	0.0.0-beta
closable	boolean	True	false	Whether the message can be closed.	0.0.0-beta