Tui

Toast 轻提示

简洁、易用的轻提示组件，支持多种类型及动画效果，适合全局消息通知

基础用法

支持不同类型的提示。

示例代码

vue

不同位置

支持 center 、 right 位置的提示。

居中位置

右侧位置

示例代码

vue

动画效果

演示 singleton 模式下的三种动画效果。

示例代码

vue

高级功能

演示 center/stack 队列与 right/singleton 动画通道，互不影响。

center / stack 队列模式

right / singleton 动画模式

示例代码

vue

属性 Props

mode

展示模式：stack 为多条堆叠，singleton 为独立单例通道

'stack' | 'singleton'

stack / singleton

stack

position

显示位置：stack / singleton 均支持 center / right，默认 center

'center' | 'right'

center / right

center

animation

动画类型，仅在 mode=singleton 且 position=right 时生效；默认关闭

false | 'fade-right' | 'slide-right' | 'scale'

false / fade-right / slide-right / scale

false

message

提示内容文本

string

type

提示类型

string

success / error / warning / info / ""

offset

提示位置偏移量，数组格式 [x, y]

[number, number]

[0, 0]

radius

圆角样式，单位 px

number | string

added 0.5.6

duration

提示自动关闭延时（毫秒）

number

2500

icon

是否显示内置前缀图标

boolean

false

deprecated 0.6.4

slideInRight

兼容字段，等价 mode=singleton + position=right + animation=slide-right

boolean

false

deprecated 0.6.4

scaleAnimate

兼容字段，等价 mode=singleton + position=right + animation=scale

boolean

false

deprecated 0.6.4

插槽 Slots

prefix

自定义前缀

added 0.6.4

基础用法

不同位置

动画效果

高级功能

属性 Props

插槽 Slots