From ee2b685f64d5f59322e2aa48fbdeb88b4bbd8422 Mon Sep 17 00:00:00 2001 From: thzxx <1440196015@qq.com> Date: Fri, 24 Jul 2026 14:59:11 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20README.md=20?= =?UTF-8?q?=E5=92=8C=20site/=20=E6=96=87=E6=A1=A3=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit README.md: - 特性列表: 80+ → 107 种图标类型，新增全局错误回调和暂停恢复说明 - 全局配置: 添加 onError 示例 - Toast 管理: 添加 getAll() 方法 - 回调: 新增 onError 全局错误回调示例 site/index.html: - 新增「错误捕获」和「暂停恢复」特性卡片 - TypeScript 卡片更新为「零 phantom 方法」 site/docs.html: - 回调表添加 onError 条目 site/demo.html: - 新增 onError 错误捕获演示卡片（含 JS 实现） --- README.md | 24 +++++++++++++++++++----- site/demo.html | 34 +++++++++++++++++++++++++++++++--- site/docs.html | 3 ++- site/index.html | 12 +++++++++++- 4 files changed, 63 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index b7ed10b..c601a87 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,14 @@ ## 特性 - **零依赖** — 纯原生 JavaScript，gzip 后不到 10KB -- **80+ 图标类型** — success/error/warning/info/loading 及更多扩展类型 +- **107 种图标类型** — success/error/warning/info/loading 及更多扩展类型，覆盖所有常见场景 - **11 种动画** — slide/fade/scale/bounce/flip/rotate/zoom/slideUp/slideDown/slideLeft/slideRight，每种效果明显不同 - **主题系统** — light/dark/auto/warm 四种内置主题，支持 `registerTheme()` 注册自定义主题 -- **国际化** — 内置 zh-CN / en-US 完整翻译，可通过 `addTranslations()` 扩展 +- **国际化** — 内置 zh-CN / en-US 完整翻译（去重优化），可通过 `addTranslations()` 扩展 - **插件系统** — 3 款预设插件 (keyboard/persistence/accessibility) + 自定义插件 - **可拖拽关闭** — 拖动 Toast 任意方向即可关闭 -- **TypeScript** — 完整类型定义 +- **TypeScript** — 完整类型定义，已对齐实际实现无 phantom 方法 +- **全局错误回调** — `onError` 捕获所有钩子异常和定时器错误，方便接入监控系统 ## 安装 @@ -107,6 +108,9 @@ MeToast.configure({ showProgress: true, // 显示进度条 draggable: true, // 允许拖拽关闭 locale: 'zh-CN', // 语言 + onError: ({ hook, error, toast }) => { // 全局错误回调（钩子/定时器异常） + console.error('Toast error:', hook, error); + }, }); ``` @@ -229,12 +233,13 @@ MeToast.i18n.formatCurrency(99, 'CNY'); // "¥99.00" ```javascript MeToast.count(); // 当前数量 -MeToast.getToasts(); // 获取所有实例 +MeToast.getAll(); // 获取原生 Map +MeToast.getToasts(); // 获取所有实例数组 MeToast.dismiss(); // 关闭所有 MeToast.dismiss(id); // 关闭指定 MeToast.pauseAll(); // 暂停所有计时 MeToast.resumeAll(); // 恢复所有计时 -MeToast.destroy(); // 完全销毁 +MeToast.destroy(); // 完全销毁（支持重复调用） ``` ## 回调 @@ -245,6 +250,15 @@ MeToast.success({ onShow: (toast) => console.log('显示:', toast.id), onClose: (toast) => console.log('关闭:', toast.id), onClick: (toast) => console.log('点击:', toast.id), + onUpdate: (toast) => console.log('更新:', toast.id), +}); + +// 全局错误回调 — 捕获钩子异常和定时器错误 +MeToast.configure({ + onError: ({ hook, source, error, toast }) => { + // 接入监控系统 (Sentry, DataDog 等) + reportError(error, { hook, source, toastId: toast?.id }); + }, }); ``` diff --git a/site/demo.html b/site/demo.html index b3094e4..ffbc685 100644 --- a/site/demo.html +++ b/site/demo.html @@ -242,7 +242,16 @@ - + +
+
🛡️ onError 错误捕获 v0.1.2
+
+ + +
+
+ +
✋ 交互特性
@@ -254,7 +263,7 @@
- +
🌍 国际化 & 格式化
@@ -264,7 +273,7 @@
- +
🎨 107种预设图标 — 点击任意图标发送Toast
@@ -387,6 +396,25 @@ }); } + // === onError === + function demoOnError() { + MeToast.configure({ + onError: function(info) { + MeToast.error('⚠️ 捕获错误: ' + (info.hook || info.source), { duration: 3000, position: 'bottom-center' }); + } + }); + MeToast.info('已启用 onError 监控（钩子/定时器异常将被捕获）', { duration: 3000 }); + // 触发一个钩子错误来演示 + var badFn = function() { throw new Error('demo-error'); }; + Toast.on('afterShow', badFn); + MeToast.success('这条消息会触发错误', { duration: 2000 }); + setTimeout(function() { Toast.off('afterShow', badFn); }, 3000); + } + function demoOnErrorReset() { + MeToast.configure({ onError: null }); + MeToast.info('onError 已重置为 null'); + } + // === i18n === function switchLocale(loc) { try{MeToast.i18n.switchLocale(loc);MeToast.configure({locale:loc});MeToast.success(loc==='zh-CN'?'已切换到中文':'Switched to English',{theme:'dark'});} diff --git a/site/docs.html b/site/docs.html index de8dab7..d1bfc3d 100644 --- a/site/docs.html +++ b/site/docs.html @@ -443,7 +443,8 @@ MeToast.use('accessibility'); onShow(toast: ToastInstance) => voidToast DOM 创建并播放入场动画后 onClose(toast: ToastInstance) => voidToast DOM 被移除后（离场动画完成时） onClick(toast: ToastInstance) => voidToast 被点击时（closeOnClick 为 true 时还会自动关闭） - onUpdate(toast: ToastInstance) => voidToast 内容通过 update() 更新后 +onUpdate(toast: ToastInstance) => voidToast 内容通过 update() 更新后 +onError({ hook, source, error, toast }) => void钩子回调或定时器发生异常时（全局配置，适用于接入错误监控）

动画列表

diff --git a/site/index.html b/site/index.html index 9dc3aa9..2f8bc57 100644 --- a/site/index.html +++ b/site/index.html @@ -129,10 +129,20 @@

零依赖

纯原生 JavaScript 实现，无需任何运行时依赖。兼容所有现代浏览器。

+
+
🛡️
+

错误捕获

+

全局 onError 回调可捕获钩子异常和定时器错误，方便接入 Sentry、DataDog 等监控系统。

+
+
+
⏱️
+

暂停恢复

+

悬停自动暂停、拖拽临时暂停、手动 pause/resume，剩余时间精确保持，不丢失进度。

+
📘

TypeScript

-

完整类型定义，智能提示全覆盖。MeToast.success()、.confirm()、.action() 全部有类型。

+

完整类型定义，与实现严格对齐零 phantom 方法。MeToast.success()、.confirm()、.action() 全部有类型。