Notify 消息通知

介绍

在页面顶部或底部展示消息通知，用于操作反馈、状态提示等场景。采用命令式调用，全局单例，同一时刻仅显示一条通知。

引入

import { TnNotify, TnNotifyOption } from "@tuniao/tn-ui";

代码演示

基础用法

通过 TnNotify.show() 方法展示通知，传入 TnNotifyOption 配置项。默认显示在顶部，3 秒后自动关闭。

点我查看代码

const option: TnNotifyOption = new TnNotifyOption();
option.message = "请填写正确的信息";
TnNotify.show(option);

通知类型

通过 type 属性设置通知的颜色类型，支持 primary、success、warning、danger 四种类型，默认为 danger。

点我查看代码

// 主要通知
const primary: TnNotifyOption = new TnNotifyOption();
primary.message = "这是一条主要通知";
primary.type = "primary";
TnNotify.show(primary);

// 成功通知
const success: TnNotifyOption = new TnNotifyOption();
success.message = "操作成功，数据已保存";
success.type = "success";
TnNotify.show(success);

// 警告通知
const warning: TnNotifyOption = new TnNotifyOption();
warning.message = "请注意，该操作存在风险";
warning.type = "warning";
TnNotify.show(warning);

// 危险通知（默认类型）
const danger: TnNotifyOption = new TnNotifyOption();
danger.message = "操作失败，请稍后重试";
danger.type = "danger";
TnNotify.show(danger);

自定义时长

通过 duration 属性设置通知自动关闭的时长，单位为毫秒，默认 3000。设置为 0 时不自动关闭，需调用 TnNotify.hide() 手动关闭。

点我查看代码

// 1 秒后关闭
const fast: TnNotifyOption = new TnNotifyOption();
fast.message = "1秒后自动关闭";
fast.type = "primary";
fast.duration = 1000;
TnNotify.show(fast);

// 5 秒后关闭
const slow: TnNotifyOption = new TnNotifyOption();
slow.message = "5秒后自动关闭";
slow.type = "success";
slow.duration = 5000;
TnNotify.show(slow);

// 不自动关闭
const manual: TnNotifyOption = new TnNotifyOption();
manual.message = "此通知不会自动关闭，需手动关闭";
manual.type = "warning";
manual.duration = 0;
TnNotify.show(manual);

// 手动关闭
TnNotify.hide();

显示位置

通过 position 属性设置通知的显示位置，支持 top（顶部）和 bottom（底部），默认为 top。

点我查看代码

// 顶部通知
const top: TnNotifyOption = new TnNotifyOption();
top.message = "顶部显示的通知消息";
top.type = "primary";
top.position = "top";
TnNotify.show(top);

// 底部通知
const bottom: TnNotifyOption = new TnNotifyOption();
bottom.message = "底部显示的通知消息";
bottom.type = "success";
bottom.position = "bottom";
TnNotify.show(bottom);

自定义样式

通过 backgroundColor 和 color 属性分别设置通知的背景色和文字颜色，自定义背景色会覆盖 type 对应的默认颜色。

点我查看代码

// 自定义背景色
const bgOption: TnNotifyOption = new TnNotifyOption();
bgOption.message = "自定义紫色背景的通知";
bgOption.backgroundColor = "#8B5CF6";
TnNotify.show(bgOption);

// 自定义文字颜色
const textOption: TnNotifyOption = new TnNotifyOption();
textOption.message = "自定义文字颜色的通知";
textOption.type = "warning";
textOption.color = "#1A1A1A";
TnNotify.show(textOption);

// 同时自定义背景色和文字颜色
const bothOption: TnNotifyOption = new TnNotifyOption();
bothOption.message = "深色背景浅色文字";
bothOption.backgroundColor = "#1E293B";
bothOption.color = "#E2E8F0";
TnNotify.show(bothOption);

事件回调

支持 onOpen、onClose、onClick 三种事件回调，分别在通知打开、关闭和被点击时触发。

点我查看代码

// 打开和关闭回调
const option: TnNotifyOption = new TnNotifyOption();
option.message = "关注打开和关闭事件";
option.type = "primary";
option.duration = 2000;
option.onOpen = () => {
  console.info("通知已打开");
};
option.onClose = () => {
  console.info("通知已关闭");
};
TnNotify.show(option);

// 点击回调
const clickOption: TnNotifyOption = new TnNotifyOption();
clickOption.message = "点击此通知触发回调";
clickOption.type = "success";
clickOption.duration = 5000;
clickOption.onClick = () => {
  console.info("通知被点击了");
};
TnNotify.show(clickOption);

// 点击后手动关闭
const closeOnClick: TnNotifyOption = new TnNotifyOption();
closeOnClick.message = "点击此通知将立即关闭";
closeOnClick.type = "warning";
closeOnClick.duration = 0;
closeOnClick.onClick = () => {
  TnNotify.hide();
};
TnNotify.show(closeOnClick);

连续调用

连续调用 TnNotify.show() 时，新通知会立即替换当前正在显示的通知。

点我查看代码

const first: TnNotifyOption = new TnNotifyOption();
first.message = "第一条通知";
first.type = "danger";
first.duration = 1500;
TnNotify.show(first);

setTimeout(() => {
  const second: TnNotifyOption = new TnNotifyOption();
  second.message = "第二条通知（替换上一条）";
  second.type = "success";
  second.duration = 2000;
  TnNotify.show(second);
}, 800);

API

方法

方法名	说明	参数	返回值
TnNotify.show	显示通知	option: TnNotifyOption	void
TnNotify.hide	关闭当前通知	-	void

TnNotifyOption

参数	说明	类型	默认值
message	通知文本内容	string	""
type	通知颜色类型	TnNotifyType	"danger"
duration	自动关闭时长(ms)，0 为不自动关闭	number	3000
position	显示位置	TnNotifyPosition	"top"
color	自定义文字颜色	ResourceColor	-
backgroundColor	自定义背景色	ResourceColor	-
onOpen	通知打开后的回调	() => void	-
onClose	通知关闭后的回调	() => void	-
onClick	通知被点击时的回调	() => void	-

类型定义

// 通知颜色类型
type TnNotifyType = "primary" | "success" | "warning" | "danger";

// 通知显示位置
type TnNotifyPosition = "top" | "bottom";