Toast 提示

Toast 提示组件用于在页面上显示简短的提示信息，通常在一段时间后自动消失。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否显示提示
content	string	''	提示内容
type	ToastType	'default'	提示类型
top	VerticalAlign | string | number	'top'	提示位置，可传入 top/center/bottom 或具体位置值
icon	string	''	自定义图标
inverse	boolean	true	是否反转颜色
duration	number	3000	显示时长（毫秒），设为 0 则不自动关闭
transitionName	TransitionName | false	'x-fade'	过渡动画名称，设为 false 则无动画

Events

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

全局方法

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

命令式创建

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

// 或简写形式（直接传入内容）
this.$toast('这是一条提示消息');

Hooks 方式

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

// 在 setup 中使用
const { toast } = useToast();
toast(options);
// 或简写形式
toast('这是一条提示消息');

示例

基础用法

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

手动关闭

可以通过控制 visible 状态来手动关闭 Toast。

不同类型

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

不同位置

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

自定义图标

可以通过 icon 属性自定义提示的图标。

反转颜色

通过 inverse 属性可以控制是否使用反转颜色。

自定义时长

通过 duration 属性可以自定义提示显示的时长。

不同动画

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

TypeScript

// Toast 类型
type ToastType = Omit<ComponentType, "secondary">;

// 垂直位置
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";

// 基础颜色类型
type ComponentType =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error"
  | "info";

// 全局方法选项
export type ToastOptions = Partial<Omit<ToastProps, "visible">> | string;