Information 信息提示

Information 组件用于展示用户需要关注的信息提示，支持不同类型的提示、自定义内容和多种显示位置。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否可见
title	string	-	标题
content	string	-	内容
type	InformationType	default	消息类型
position	Position	top-right	显示位置
duration	number	3000	显示时长(ms), 0 表示不自动关闭
closable	boolean	true	是否可关闭
enterable	boolean	true	鼠标移入是否暂停关闭
transitionName	TransitionName	false	-

Slots

名称	描述	参数
default	自定义内容	-
title	自定义标题	-

Events

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

全局方法

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

命令式创建

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

Hooks 方式

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

// 在 setup 中使用
const { information } = useInformation();
information(options);

示例

基础用法

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

不同类型

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

不同位置

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

自定义内容

通过默认插槽可以自定义信息提示的内容。

自定义标题

通过 title 插槽可以自定义信息提示的标题。

不同动画

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

TypeScript

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

// 位置
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

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

// 全局方法选项
export interface InformationOptions
  extends Partial<Omit<InformationProps, 'visible'>> {
  /**
   * 传递给内容组件的 props
   */
  componentProps?: Record<string, any>;
}