Toast 吐司

用于展示短暂且不打断用户操作的反馈信息，支持自动关闭、手动关闭、堆叠展示、进度条提示、ESC 快捷键关闭、响应式视口适配与显示/隐藏动画。

BrToast 基于 BrConfigProvider 实现全局主题配置（颜色/圆角/阴影/z-index 等 tokens），同时支持组件式与函数式两种调用方式。

基础用法

点击按钮后弹出默认样式 Toast（自动关闭 + 可手动关闭）。

Example

变体

使用 variant 属性控制 Toast 的视觉风格：

• Default：默认风格
• Primary：主色风格
• Success：成功色风格
• Error：错误色风格
• Warning：警告色风格
• Info：信息色风格

Example

位置与堆叠

支持 8 个弹出位置（top/top-left/top-center/top-right/bottom/bottom-left/bottom-center/bottom-right），并支持堆叠展示与进度条提示。

Select Position

Duration (ms)

Example

主题定制

通过 BrConfigProvider 全局配置 Toast 默认位置、圆角、阴影、各变体颜色、z-index；也可以通过类名局部覆盖样式。

全局定制（BrConfigProvider）

Theme Preview

Configure Toast tokens and default behavior globally via BrConfigProvider

Example

局部定制（TailwindCSS 类名覆盖）

Example

API

BrToast

Prop	类型	默认值	说明
open	boolean	undefined	受控打开状态（配合 @update:open/v-model:open 使用）。
defaultOpen	boolean	false	非受控初始打开状态。
duration	number	undefined	当前 Toast 自动关闭时间（ms），优先级高于 Provider 的 duration。
variant	'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'	'default'	变体样式。
position	BrToastPosition	undefined	当前 Toast 的弹出位置（优先级高于 Provider/BrConfigProvider）。
dismissible	boolean	true	是否显示关闭按钮、允许手动关闭。
showProgress	boolean	false	是否展示自动关闭进度条（依赖 duration > 0）。
title	string | Component	undefined	标题内容（不传时可用 #title 插槽）。
description	string | Component	undefined	描述内容（不传时可用 #description 插槽）。
icon	Component	undefined	图标内容（不传时可用 #icon 插槽）。
class	string	''	追加 TailwindCSS 类名，用于局部覆盖样式。

BrToastProvider

Prop	类型	默认值	说明
position	BrToastPosition	undefined	覆盖 BrConfigProvider 的默认位置。
duration	number	undefined	覆盖 BrConfigProvider 的默认自动关闭时间（ms）。
closeDelay	number	undefined	关闭后从堆叠列表移除的延迟（ms），用于保留关闭动画。
max	number	undefined	最大堆叠数量，超出会移除更早的 Toast。
closeOnEscape	boolean	undefined	是否允许按 ESC 关闭最新 Toast。
viewportClass	string	''	追加到视口（Viewport）的类名，用于局部布局覆盖。

useToast

字段	类型	默认值	说明
toast	(options: BrToastOptions) => { id, dismiss, update }	-	触发 Toast，并返回句柄（可更新/关闭）。
dismiss	(id?: string) => void	-	关闭指定 Toast；不传 id 关闭全部。
update	(id: string, patch: BrToastOptions) => void	-	更新指定 Toast 的配置（标题/描述/变体/时长等）。
toasts	Ref<BrToastItem[]>	-	当前 Toast 列表（用于自定义渲染场景）。