Message 消息提示

Message 组件用于展示轻量级的提示信息，可以自动关闭，支持不同类型和位置的消息展示。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否可见
content	string	-	消息内容
type	MessageType	info	消息类型
top	VerticalAlign | string | number	center	显示位置
duration	number	3000	显示时长(ms), 0 表示不自动关闭
closable	boolean	true	是否可关闭
enterable	boolean	true	鼠标移入是否暂停关闭
transitionName	TransitionName | false	x-slide-down	过渡动画名称，false 表示不使用动画

Events

名称	描述	参数
update:visible	可见状态变化时触发	(visible: boolean) => void
close	关闭后触发	-

全局方法

除了组件方式使用外，X-UI 还提供了全局方法 $message 和 useMessage 钩子来使用 Message 组件。

命令式创建

// 使用方法
this.$message(options);

// 或者直接传入字符串
this.$message('这是一条消息提示');

Hooks 方式

import { useMessage } from '@xpyjs/x-ui';

// 在 setup 中使用
const { message } = useMessage();
message(options);

// 或者直接传入字符串
message('这是一条消息提示');

示例

基础用法

使用 v-model:visible 来控制消息提示的显示和隐藏。

不同类型

Message 组件提供了多种类型，包括默认、信息、成功、警告和错误。

不同位置

可以通过 top 属性指定消息提示的显示位置。

手动关闭

可以通过 closable 属性控制消息是否可以手动关闭。

自定义时长

可以通过 duration 属性自定义消息显示的时长，设置为 0 则不会自动关闭。

多行文本

Message 组件支持显示多行文本内容。

不同动画

通过 transitionName 属性可以设置不同的过渡动画。

TypeScript

// 消息类型
type MessageType = 'default' | 'info' | 'success' | 'warning' | 'error';

// 垂直位置
type VerticalAlign = 'top' | 'center' | 'bottom';

// 动画名称
type TransitionName =
  | 'x-fade'
  | 'x-zoom'
  | 'x-slide'
  | 'x-slide-up'
  | 'x-slide-down'
  | 'x-slide-left'
  | 'x-slide-right';

// 全局方法选项
export interface MessageOptions
  extends Partial<Omit<MessageProps, 'visible'>> {
}