消息提示 Message

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

基础使用

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

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

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

<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>

消息类型

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

<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>

消息位置

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

<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 设置消息可关闭。

<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 设置消息持续时间。

<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>

消息图标

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>

消息内容

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

<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>

自定义颜色

自定义主色，内部基于此生成完整色板，该色板优先级高于 info 属性提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)'字符串和 3、4、6、8位长度的十六位数字表示。

<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>

消息容器

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

属性	类型	可选	默认值	描述	版本
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'`	是	`'normal'`	消息类型。	0.0.0-beta
color	`string`	是		自定义主色，内部基于此生成完整色板，该色板优先级高于 `info` 属性提供的预设色版。支持类似 CSS 的 `'rgb(r, g, b)'` 和 `'rgba(r, g, b, a)'` 字符串和 3、4、6、8 位长度的十六位数字表示。	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

MessageBoxProps

属性	类型	可选	默认值	描述	版本
messages	`MessageProps[]`	否		当前 MessageBox 的所有消息。	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'`	是	`'normal'`	消息类型。	0.0.0-beta
color	`string`	是		自定义主色，内部基于此生成完整色板，该色板优先级高于 `info` 属性提供的预设色版。支持类似 CSS 的 `'rgb(r, g, b)'` 和 `'rgba(r, g, b, a)'` 字符串和 3、4、6、8 位长度的十六位数字表示。	0.0.0-beta
closable	`boolean`	是	`false`	是否可以关闭消息。	0.0.0-beta

消息提示 Message ​

基础使用 ​

消息类型 ​

消息位置 ​

可关闭消息 ​

持续时间 ​

消息图标 ​

消息内容 ​

自定义颜色 ​

消息容器 ​

API ​

MessageFunction ​

ValidContent, ValidVNodeContent ​

MessageOptions ​

MessageReturn ​

MessageBoxProps ​

MessageBoxEvents ​

MessageBoxExpose ​

MessageProps ​