Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基本用法

<script lang="ts" setup>
	import { h } from 'vue'
	import { VrMessage } from 'veyra'

	const open = () => {
		VrMessage('This is a message.')
	}

	const openVn = () => {
		VrMessage({
			message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
				h('span', null, 'Message can be '),
				h('i', { style: 'color: teal' }, 'VNode'),
			]),
		})
	}
</script>

<template>
	<vr-button :plain="true" @click="open">Show message</vr-button>
	<vr-button :plain="true" @click="openVn">VNode</vr-button>
</template>

<script lang="ts" setup>
	import { VrMessage } from 'veyra'

	const open1 = () => {
		VrMessage({
			message: 'Congrats, this is a success message.',
			type: 'success',
		})
	}
	const open2 = () => {
		VrMessage.success('Congrats, this is a success message.')
	}
</script>
<template>
	<div>
		<vr-button @click="open1">插件式调用</vr-button>
		<vr-button @click="open2">函数式调用</vr-button>
		<vr-button @click="$message.success('Congrats, this is a success message.')"
			>全局方法调用</vr-button
		>
	</div>
</template>

不同类型

用来显示「成功、警告、消息、错误」类的操作反馈。通过 type 属性来配置。

<script lang="ts" setup>
	import { VrMessage } from 'veyra'

	const open1 = () => {
		VrMessage('This is a message.')
	}
	const open2 = () => {
		VrMessage({
			message: 'Congrats, this is a success message.',
			type: 'success',
		})
	}
	const open3 = () => {
		VrMessage({
			message: 'Warning, this is a warning message.',
			type: 'warning',
		})
	}
	const open4 = () => {
		VrMessage.error('Oops, this is a error message.')
	}
</script>

<template>
	<vr-button :plain="true" @click="open2">Success</vr-button>
	<vr-button :plain="true" @click="open3">Warning</vr-button>
	<vr-button :plain="true" @click="open1">Message</vr-button>
	<vr-button :plain="true" @click="open4">Error</vr-button>
</template>

可关闭的

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 此外，和 Notification 一样，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

<script lang="ts" setup>
	import { VrMessage } from 'veyra'

	const open1 = () => {
		VrMessage({
			showClose: true,
			message: 'This is a message.',
		})
	}
	const open2 = () => {
		VrMessage({
			showClose: true,
			message: 'Congrats, this is a success message.',
			type: 'success',
		})
	}
	const open3 = () => {
		VrMessage({
			showClose: true,
			message: 'Warning, this is a warning message.',
			type: 'warning',
		})
	}
	const open4 = () => {
		VrMessage({
			showClose: true,
			message: 'Oops, this is a error message.',
			type: 'danger',
		})
	}
</script>

<template>
	<vr-button :plain="true" @click="open1">Message</vr-button>
	<vr-button :plain="true" @click="open2">Success</vr-button>
	<vr-button :plain="true" @click="open3">Warning</vr-button>
	<vr-button :plain="true" @click="open4">Error</vr-button>
</template>

文字居中

通过 center 属性来配置文字是否居中。

<script lang="ts" setup>
	import { VrMessage } from 'veyra'

	const openCenter = () => {
		VrMessage({
			showClose: true,
			message: 'Centered text',
			center: true,
		})
	}
</script>

<template>
	<vr-button plain @click="openCenter">Centered text</vr-button>
</template>

全局方法

Message 组件提供了全局方法 $message，在 Vue 实例中可以作为 this.$message 使用。

单独引用

import { VrMessage } from 'veyra'

Message API

Options

Name	Description	Type	Default
message	消息文字	string | VNode	-
type	主题类型	enum - success | warning | error | danger | info	info
duration	显示时间，设置为 0 则不会自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
center	文字是否居中	boolean	false
offset	Message 距离窗口顶部的偏移	number	10
transitionName	自定义 CSS 过渡动画名称	string	fade-up

Handler

Name	Description	Type
close	关闭 Message	() => void