Notification 通知

基于 Radix Vue 的 Toast 组件构建，提供灵活的通知提示功能。 支持多种变体、位置配置、自动关闭、滑动关闭等特性。

基于 BrConfigProvider 实现全局主题配置，支持组件式/函数式两种调用方式。

基础用法

最简单的通知提示。

Example

变体样式

支持 default, primary, success, error, warning, info 六种变体。

Example

位置与持续时间

支持通过 BrNotificationProvider 配置弹出的位置（top-left/top-right/bottom-left/bottom-right）以及自动关闭的时间。

Select Position

Duration (ms)

Example

带操作按钮

可以添加操作按钮来处理用户交互。

Example

API

BrNotification

属性	类型	默认值	说明
title	string	-	通知的标题
description	string	-	通知的描述内容
variant	'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'	'default'	通知的变体样式
duration	number	5000	自动关闭的延迟时间（毫秒）
dismissible	boolean	true	是否显示关闭按钮
action	NotificationAction	-	操作按钮配置
icon	Component	-	自定义图标组件

BrNotificationProvider

属性	类型	默认值	说明
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	通知显示的位置
duration	number	5000	默认自动关闭时间
swipeDirection	'up' | 'down' | 'left' | 'right'	'right'	滑动关闭的方向
swipeThreshold	number	50	滑动关闭的阈值

useNotification

方法	参数	返回值	说明
toast	props: Omit<NotificationProps, 'id'>	{ id, dismiss, update }	创建并显示一条通知
dismiss	id?: string	-	关闭指定 id 的通知，若不传则关闭所有
toasts	-	Ref<NotificationProps[]>	当前所有通知的响应式列表

主题定制

全局配置 (BrConfigProvider)

通过 BrConfigProvider 可以全局配置 Notification 的样式变量。

<template>
  <BrConfigProvider :theme="themeConfig">
    <BrNotificationProvider>
      <App />
    </BrNotificationProvider>
  </BrConfigProvider>
</template>

<script setup>
const themeConfig = {
  radius: 0.5,
  primary: '#3b82f6',
  success: '#22c55e',
  error: '#ef4444',
  warning: '#f59e0b',
  info: '#3b82f6',
  zNotification: 200, // 自定义 z-index
}
</script>

TailwindCSS 覆盖

可以通过 class 属性直接覆盖样式。

toast({
  title: 'Custom Style',
  class: 'bg-purple-500 text-white border-none',
})