docs: 更新 README.md 和 site/ 文档页
README.md: - 特性列表: 80+ → 107 种图标类型,新增全局错误回调和暂停恢复说明 - 全局配置: 添加 onError 示例 - Toast 管理: 添加 getAll() 方法 - 回调: 新增 onError 全局错误回调示例 site/index.html: - 新增「错误捕获」和「暂停恢复」特性卡片 - TypeScript 卡片更新为「零 phantom 方法」 site/docs.html: - 回调表添加 onError 条目 site/demo.html: - 新增 onError 错误捕获演示卡片(含 JS 实现)
This commit is contained in:
@@ -9,13 +9,14 @@
|
|||||||
## 特性
|
## 特性
|
||||||
|
|
||||||
- **零依赖** — 纯原生 JavaScript,gzip 后不到 10KB
|
- **零依赖** — 纯原生 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,每种效果明显不同
|
- **11 种动画** — slide/fade/scale/bounce/flip/rotate/zoom/slideUp/slideDown/slideLeft/slideRight,每种效果明显不同
|
||||||
- **主题系统** — light/dark/auto/warm 四种内置主题,支持 `registerTheme()` 注册自定义主题
|
- **主题系统** — light/dark/auto/warm 四种内置主题,支持 `registerTheme()` 注册自定义主题
|
||||||
- **国际化** — 内置 zh-CN / en-US 完整翻译,可通过 `addTranslations()` 扩展
|
- **国际化** — 内置 zh-CN / en-US 完整翻译(去重优化),可通过 `addTranslations()` 扩展
|
||||||
- **插件系统** — 3 款预设插件 (keyboard/persistence/accessibility) + 自定义插件
|
- **插件系统** — 3 款预设插件 (keyboard/persistence/accessibility) + 自定义插件
|
||||||
- **可拖拽关闭** — 拖动 Toast 任意方向即可关闭
|
- **可拖拽关闭** — 拖动 Toast 任意方向即可关闭
|
||||||
- **TypeScript** — 完整类型定义
|
- **TypeScript** — 完整类型定义,已对齐实际实现无 phantom 方法
|
||||||
|
- **全局错误回调** — `onError` 捕获所有钩子异常和定时器错误,方便接入监控系统
|
||||||
|
|
||||||
## 安装
|
## 安装
|
||||||
|
|
||||||
@@ -107,6 +108,9 @@ MeToast.configure({
|
|||||||
showProgress: true, // 显示进度条
|
showProgress: true, // 显示进度条
|
||||||
draggable: true, // 允许拖拽关闭
|
draggable: true, // 允许拖拽关闭
|
||||||
locale: 'zh-CN', // 语言
|
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
|
```javascript
|
||||||
MeToast.count(); // 当前数量
|
MeToast.count(); // 当前数量
|
||||||
MeToast.getToasts(); // 获取所有实例
|
MeToast.getAll(); // 获取原生 Map<id, ToastInstance>
|
||||||
|
MeToast.getToasts(); // 获取所有实例数组
|
||||||
MeToast.dismiss(); // 关闭所有
|
MeToast.dismiss(); // 关闭所有
|
||||||
MeToast.dismiss(id); // 关闭指定
|
MeToast.dismiss(id); // 关闭指定
|
||||||
MeToast.pauseAll(); // 暂停所有计时
|
MeToast.pauseAll(); // 暂停所有计时
|
||||||
MeToast.resumeAll(); // 恢复所有计时
|
MeToast.resumeAll(); // 恢复所有计时
|
||||||
MeToast.destroy(); // 完全销毁
|
MeToast.destroy(); // 完全销毁(支持重复调用)
|
||||||
```
|
```
|
||||||
|
|
||||||
## 回调
|
## 回调
|
||||||
@@ -245,6 +250,15 @@ MeToast.success({
|
|||||||
onShow: (toast) => console.log('显示:', toast.id),
|
onShow: (toast) => console.log('显示:', toast.id),
|
||||||
onClose: (toast) => console.log('关闭:', toast.id),
|
onClose: (toast) => console.log('关闭:', toast.id),
|
||||||
onClick: (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 });
|
||||||
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
+31
-3
@@ -242,7 +242,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 14. 交互特性 -->
|
<!-- 14. 错误回调 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">🛡️ onError 错误捕获 <span style="color:#34d399;font-size:10px;">v0.1.2</span></div>
|
||||||
|
<div class="btn-row">
|
||||||
|
<button class="btn c-e" onclick="demoOnError()">演示 onError</button>
|
||||||
|
<button class="btn c-w" onclick="demoOnErrorReset()">重置回调</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 15. 交互特性 -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="label">✋ 交互特性</div>
|
<div class="label">✋ 交互特性</div>
|
||||||
<div class="btn-row">
|
<div class="btn-row">
|
||||||
@@ -254,7 +263,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 15. 国际化切换 -->
|
<!-- 16. 国际化切换 -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="label">🌍 国际化 & 格式化</div>
|
<div class="label">🌍 国际化 & 格式化</div>
|
||||||
<div class="btn-row">
|
<div class="btn-row">
|
||||||
@@ -264,7 +273,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 16. 107种预设图标 -->
|
<!-- 17. 107种预设图标 -->
|
||||||
<div class="card" style="grid-column:1/-1;">
|
<div class="card" style="grid-column:1/-1;">
|
||||||
<div class="label">🎨 107种预设图标 — 点击任意图标发送Toast</div>
|
<div class="label">🎨 107种预设图标 — 点击任意图标发送Toast</div>
|
||||||
<div class="btn-row" id="icon-grid" style="max-height:300px;overflow-y:auto;padding:4px 0;"></div>
|
<div class="btn-row" id="icon-grid" style="max-height:300px;overflow-y:auto;padding:4px 0;"></div>
|
||||||
@@ -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 ===
|
// === i18n ===
|
||||||
function switchLocale(loc) {
|
function switchLocale(loc) {
|
||||||
try{MeToast.i18n.switchLocale(loc);MeToast.configure({locale:loc});MeToast.success(loc==='zh-CN'?'已切换到中文':'Switched to English',{theme:'dark'});}
|
try{MeToast.i18n.switchLocale(loc);MeToast.configure({locale:loc});MeToast.success(loc==='zh-CN'?'已切换到中文':'Switched to English',{theme:'dark'});}
|
||||||
|
|||||||
@@ -444,6 +444,7 @@ MeToast.<span class="fn">use</span>(<span class="s">'accessibility'</span>); <sp
|
|||||||
<tr><td>onClose</td><td>(toast: ToastInstance) => void</td><td>Toast DOM 被移除后(离场动画完成时)</td></tr>
|
<tr><td>onClose</td><td>(toast: ToastInstance) => void</td><td>Toast DOM 被移除后(离场动画完成时)</td></tr>
|
||||||
<tr><td>onClick</td><td>(toast: ToastInstance) => void</td><td>Toast 被点击时(closeOnClick 为 true 时还会自动关闭)</td></tr>
|
<tr><td>onClick</td><td>(toast: ToastInstance) => void</td><td>Toast 被点击时(closeOnClick 为 true 时还会自动关闭)</td></tr>
|
||||||
<tr><td>onUpdate</td><td>(toast: ToastInstance) => void</td><td>Toast 内容通过 update() 更新后</td></tr>
|
<tr><td>onUpdate</td><td>(toast: ToastInstance) => void</td><td>Toast 内容通过 update() 更新后</td></tr>
|
||||||
|
<tr><td>onError</td><td>({ hook, source, error, toast }) => void</td><td>钩子回调或定时器发生异常时(全局配置,适用于接入错误监控)</td></tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2 id="animations">动画列表</h2>
|
<h2 id="animations">动画列表</h2>
|
||||||
|
|||||||
+11
-1
@@ -129,10 +129,20 @@
|
|||||||
<h3>零依赖</h3>
|
<h3>零依赖</h3>
|
||||||
<p>纯原生 JavaScript 实现,无需任何运行时依赖。兼容所有现代浏览器。</p>
|
<p>纯原生 JavaScript 实现,无需任何运行时依赖。兼容所有现代浏览器。</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">🛡️</div>
|
||||||
|
<h3>错误捕获</h3>
|
||||||
|
<p>全局 <code>onError</code> 回调可捕获钩子异常和定时器错误,方便接入 Sentry、DataDog 等监控系统。</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="feature-icon">⏱️</div>
|
||||||
|
<h3>暂停恢复</h3>
|
||||||
|
<p>悬停自动暂停、拖拽临时暂停、手动 pause/resume,剩余时间精确保持,不丢失进度。</p>
|
||||||
|
</div>
|
||||||
<div class="feature">
|
<div class="feature">
|
||||||
<div class="feature-icon">📘</div>
|
<div class="feature-icon">📘</div>
|
||||||
<h3>TypeScript</h3>
|
<h3>TypeScript</h3>
|
||||||
<p>完整类型定义,智能提示全覆盖。<code>MeToast.success()</code>、<code>.confirm()</code>、<code>.action()</code> 全部有类型。</p>
|
<p>完整类型定义,与实现严格对齐零 phantom 方法。<code>MeToast.success()</code>、<code>.confirm()</code>、<code>.action()</code> 全部有类型。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user