From 3ab10f89a4da09d9609d102e68850aa7f22993a2 Mon Sep 17 00:00:00 2001 From: tianhao Date: Tue, 16 Jun 2026 13:32:14 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20examples/=E2=86=92site/=20=E5=AE=98?= =?UTF-8?q?=E7=BD=91+=E6=96=87=E6=A1=A3+=E6=BC=94=E7=A4=BA=E4=B8=89?= =?UTF-8?q?=E4=BB=B6=E5=A5=97;=20=E6=9B=B4=E6=96=B0build.sh/rollup/serve.s?= =?UTF-8?q?h=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.sh | 3 +- examples/demo.html | 395 --------------------------------------- examples/index.html | 442 -------------------------------------------- rollup.config.js | 4 +- serve.sh | 5 +- site/demo.html | 259 ++++++++++++++++++++++++++ site/docs.html | 355 +++++++++++++++++++++++++++++++++++ site/index.html | 222 ++++++++++++++++++++++ 8 files changed, 843 insertions(+), 842 deletions(-) delete mode 100644 examples/demo.html delete mode 100644 examples/index.html create mode 100644 site/demo.html create mode 100644 site/docs.html create mode 100644 site/index.html diff --git a/build.sh b/build.sh index c48e4f5..273850c 100644 --- a/build.sh +++ b/build.sh @@ -78,5 +78,6 @@ echo " 2. ES Module: import MeToast from 'dist/metona-toast.esm.js'" echo " 3. CommonJS: const MeToast = require('dist/metona-toast.cjs.js')" echo "" echo "📝 示例:" -echo " 打开 examples/demo.html 查看完整示例" +echo " 打开 site/index.html 查看官网" +echo " 打开 site/demo.html 查看演示" echo "" diff --git a/examples/demo.html b/examples/demo.html deleted file mode 100644 index baf5629..0000000 --- a/examples/demo.html +++ /dev/null @@ -1,395 +0,0 @@ - - - - - - MetonaToast — 全功能演示 - - - - -
-

MetonaToast

-

轻量 · 零依赖 · 精致美观 — 全功能演示

-
- - - -
- - -
-
🎨

图标类型

80+ 内置图标类型

-
-
常用
-
- - - - - - -
-
-
操作
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
系统 & 设备
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
自然 & 几何
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
📍

位置

6 种预设位置

-
-
- - - - - - -
-
-
- - -
-
🎭

动画效果

11 种动画，每种效果明显不同

-
-
- - - - - - - - - - - -
-
-
- - -
-
🎨

主题

四种基础主题，支持 registerTheme() 自定义注册

-
-
基础主题
-
-
浅色 light
-
深色 dark
-
自动 auto
-
暖色 warm
-
-
-
- - -
-
⚡

高级功能

Promise / 确认框 / 输入框 / 进度条 / 倒计时 / 队列 / 堆叠

-
-
- - - - - - - -
-
-
- - -
-
🔌

插件系统

3 款预设插件，按需安装

-
-
- - - -
-
-
- - -
-
🌍

国际化

切换语言查看效果

-
-
- - - - - - - - - -
-
-
- - -
-
🔧

Toast 管理

统计、关闭、清除

-
-
- - - - - - - -
-
-
- -
- - - - - - - diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index c567689..0000000 --- a/examples/index.html +++ /dev/null @@ -1,442 +0,0 @@ - - - - - - MetonaToast — 基础功能与代码示例 - - - - -
-

MetonaToast

-

轻量 · 零依赖 · 精致美观的 Toast 通知库

-
- 📦 <10KB gzip🎨 80+ 图标🎭 11 动画🌍 国际化🔌 插件 -
-
- -
- - -
-

📦 安装与引用

-
-

npm

- 
# 安装
-npm install metona-toast
-
-# ES Module
-import MeToast from 'metona-toast';
-
-# CommonJS
-const MeToast = require('metona-toast');
-
-
-

CDN

- 
<!-- UMD 开发版 -->
-<script src="https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.js"></script>
-
-<!-- 压缩版（生产环境推荐）-->
-<script src="https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.min.js"></script>
-
-<!-- ES Module 直接引用 -->
-<script type="module">
-  import MeToast from 'https://unpkg.com/metona-toast@2.0.0/dist/metona-toast.esm.js';
-</script>
-
-
- - -
-

🎯 基础调用

-

五种核心类型，一行代码搞定

-
-
- - - - - -
- 
// 五种类型，一行搞定
-MeToast.success('操作成功！');
-MeToast.error('操作失败！');
-MeToast.warning('请注意检查');
-MeToast.info('系统维护中');
-MeToast.show('默认消息');
-
-
- - -
-

⚙️ 配置选项

-

标题、位置、时长、主题、动画……灵活可控

-
-
- - - - - -
- 
// 带标题
-MeToast.success({ title: '保存成功', message: '文件已同步到云端' });
-
-// 自定义时长 — 显示10秒
-MeToast.info('显示10秒', { duration: 10000 });
-
-// 自定义位置 — 底部居中
-MeToast.warning('底部居中', { position: 'bottom-center' });
-
-// 手动关闭 — 不自动消失
-MeToast.info('手动关闭', { duration: 0, closeButton: true });
-
-// 自定义动画 — 弹跳效果
-MeToast.success('弹跳动画', { animation: 'bounce' });
-
-
- - -
-

🔄 Loading 链式转换

-

加载中 → 成功/失败/警告/信息，优雅切换

-
-
- - -
- 
// loading → success
-const loading = MeToast.loading('正在提交...');
-setTimeout(() => loading.success('提交成功！'), 2000);
-
-// loading → error
-const loading = MeToast.loading('正在提交...');
-setTimeout(() => loading.error('提交失败，请重试'), 2000);
-
-
- - -
-

⛓ Promise 封装

-

一行代码自动处理 loading / success / error

-
-
- -
- 
await MeToast.promise(
-  fetch('/api/data'),
-  {
-    loading: '加载中...',
-    success: '加载完成！',
-    error: '加载失败',
-  }
-);
-
-
- - -
-

💬 确认框 & 输入框

-

内置对话框，返回 Promise

-
-
- - -
- 
// 确认对话框 → Promise<boolean>
-const ok = await MeToast.confirm('确定删除吗？', {
-  confirmText: '删除',
-  confirmColor: '#ef4444',
-});
-
-// 输入对话框 → Promise<string|null>
-const name = await MeToast.prompt('请输入姓名', {
-  placeholder: '请输入...',
-});
-
-
- - -
-

📊 进度条 & 倒计时

-

实时更新的进度通知和自动倒计时

-
-
- - -
- 
// 进度条 — 实时更新
-const p = MeToast.progress('上传中...');
-let v = 0;
-const t = setInterval(() => {
-  v += Math.random() * 28;
-  if (v >= 100) { clearInterval(t); p.complete('上传完成！'); }
-  else p.setProgress(v);
-}, 400);
-
-// 倒计时 — {seconds} 自动替换
-MeToast.countdown('{seconds} 秒后执行', 5, {
-  onComplete: () => MeToast.success('已执行'),
-});
-
-
- - -
-

📋 队列 & 堆叠

-

顺序逐个展示 or 同时错峰展示

-
-
- - -
- 
// 队列 — 一个接一个
-await MeToast.queue(['步骤一', '步骤二', '步骤三'], {
-  delay: 800,
-  duration: 2000,
-  type: 'info',
-});
-
-// 堆叠 — 同时错峰
-MeToast.stack(['消息 1', '消息 2', '消息 3', '消息 4'], {
-  stagger: 150,
-  type: 'info',
-});
-
-
- - -
-

🔌 插件

-

3 款预设插件，按需安装

-
-
- - - -
- 
// keyboard — ESC 关闭所有 Toast
-MeToast.use('keyboard');
-
-// persistence — 配置持久化（自动保存/加载）
-MeToast.use('persistence');
-
-// accessibility — 屏幕阅读器朗读公告
-MeToast.use('accessibility');
-
-
- - -
-

🔧 全局配置

-

一次配置，所有 Toast 自动继承

-
- 
MeToast.configure({
-  position: 'top-right',       // 默认位置
-  duration: 4000,                // 默认显示时长(ms)
-  max: 6,                        // 同时最多显示条数
-  theme: 'auto',                // light | dark | auto | warm
-  animation: 'slide',            // 默认动画效果
-  pauseOnHover: true,           // 悬停暂停计时
-  closeOnClick: true,           // 点击关闭
-  showProgress: true,           // 显示进度条
-  draggable: true,             // 允许拖拽关闭
-  locale: 'zh-CN',              // 默认语言
-});
-
-
- - -
-

🎨 主题 & 国际化

-

内置四种主题，支持自定义注册；内置中英文，可扩展

-
-
- - - - - -
- 
// 切换主题（switchTheme + configure 同步全局配置）
-MeToast.themes.switchTheme('warm');
-MeToast.configure({ theme: 'warm' });
-
-// 切换语言 — 英文
-MeToast.i18n.switchLocale('en-US');
-
-// 切换回中文
-MeToast.i18n.switchLocale('zh-CN');
-
-// 注册自定义主题
-MeToast.themes.registerTheme('ocean', {
-  bg: 'rgba(240,249,255,0.96)',
-  text: '#0c4a6e',
-  border: 'rgba(14,165,233,0.2)',
-  shadow: '0 10px 36px -10px rgba(14,165,233,0.18)',
-  hoverShadow: '0 14px 48px -10px rgba(14,165,233,0.22)',
-  progressBg: 'rgba(14,165,233,0.1)',
-  closeHoverBg: 'rgba(14,165,233,0.1)',
-});
-
-
- - -
-

🔧 Toast 管理

-

查找、关闭、清除、暂停、恢复

-
-
- - - - - - -
- 
MeToast.count();           // 当前数量
-MeToast.getToasts();      // 获取所有实例
-MeToast.dismiss();        // 关闭全部
-MeToast.dismiss(id);      // 关闭指定
-MeToast.pauseAll();       // 暂停全部计时
-MeToast.resumeAll();      // 恢复全部计时
-MeToast.destroy();        // 完全销毁
-
-
- - -
-

📖 API 速览

-
- - - - - - - - - - - - - - - - -
方法说明示例
success(msg, opts?)成功通知MeToast.success('保存成功')
error(msg, opts?)错误通知MeToast.error('网络错误')
warning(msg, opts?)警告通知MeToast.warning('请注意')
info(msg, opts?)信息通知MeToast.info('系统维护中')
loading(msg, opts?)加载状态MeToast.loading('加载中...')
promise(p, opts)Promise 自动状态MeToast.promise(fetch(...), opts)
confirm(msg, opts?)确认对话框 → booleanawait MeToast.confirm('删除?')
prompt(msg, opts?)输入对话框 → stringawait MeToast.prompt('姓名?')
progress(msg, opts?)进度条通知MeToast.progress('上传中...')
countdown(msg, s, opts?)倒计时MeToast.countdown('{seconds}s', 10)
queue(msgs, opts?)队列顺序展示MeToast.queue(['a','b','c'])
stack(msgs, opts?)堆叠错峰展示MeToast.stack(['a','b','c'])
configure(opts)全局配置MeToast.configure({duration:5000})
dismiss(id?)关闭 toastMeToast.dismiss()
-
-
- -
- - - - - - - diff --git a/rollup.config.js b/rollup.config.js index f214ce4..294884c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -21,11 +21,11 @@ const baseConfig = { const devPlugins = isDev ? [ serve({ open: true, - contentBase: ['examples', 'dist'], + contentBase: ['site', 'dist'], port: 3000, }), livereload({ - watch: ['src', 'examples'], + watch: ['src', 'site'], }), ] : []; diff --git a/serve.sh b/serve.sh index 0ffa3ec..f0ebe92 100644 --- a/serve.sh +++ b/serve.sh @@ -21,8 +21,9 @@ echo "✅ Python: $($PYTHON --version 2>&1)" echo "🌐 启动服务器..." echo "" echo "📁 访问地址:" -echo " http://localhost:$PORT/examples/demo.html" -echo " http://localhost:$PORT/examples/index.html" +echo " http://localhost:$PORT/site/index.html" +echo " http://localhost:$PORT/site/demo.html" +echo " http://localhost:$PORT/site/docs.html" echo "" echo "按 Ctrl+C 停止服务器" echo "" diff --git a/site/demo.html b/site/demo.html new file mode 100644 index 0000000..df54360 --- /dev/null +++ b/site/demo.html @@ -0,0 +1,259 @@ + + + + + +在线演示 — MetonaToast + + + + + + +
+

在线演示

+

所有功能均可点击体验 — 192 个测试用例全部通过验证

+
+ +
+ + +
+
📢 基础通知
+
+ + + + + +
+
+
+ + + + + +
+
+
+ + +
+
🔄 Loading 链式转换
+
+ + + +
+
+ + +
+
💬 对话框
+
+ + + +
+
+ + +
+
📊 进度 & 队列
+
+ + + +
+
+ + +
+
⚡ Action Toast NEW
+
+ + + +
+
+ + +
+
📁 分组管理 NEW
+
+ + + +
+
+ + +
+
🎭 动画效果
+
+ + + + + + + + + + + +
+
+ + +
+
📍 位置
+
+ + + + + + +
+
+ + +
+
🎨 主题切换
+
+ + + + +
+
+ + +
+
🔌 插件
+
+ + + +
+
+ + +
+
🔧 Toast 管理
+
+ + + + + + +
+
+ +
+ + + + + + + diff --git a/site/docs.html b/site/docs.html new file mode 100644 index 0000000..738c33b --- /dev/null +++ b/site/docs.html @@ -0,0 +1,355 @@ + + + + + +API 文档 — MetonaToast + + + + + + +
+ +

API 文档

+

MetonaToast v2.0.0 完整 API 参考。所有方法均支持链式调用和配置覆盖。

+ + +

show(message, opts?)

+

显示默认类型的 Toast 通知。

+
// 字符串
+MeToast.show('默认消息');
+
+// 带配置
+MeToast.show('自定义', { duration: 2000, position: 'bottom-center' });
+
+// 对象形式
+MeToast.show({ title: '标题', message: '内容' });
+ +

success(message, opts?)

+

显示成功通知。绿色对勾图标。

+
MeToast.success('保存成功！');
+MeToast.success({ title: '已保存', message: '文件已同步到云端' });
+ +

error(message, opts?)

+

显示错误通知。红色叉号图标。

+
MeToast.error('网络错误，请重试');
+ +

warning(message, opts?)

+

显示警告通知。黄色三角图标。

+
MeToast.warning('请注意检查输入内容');
+ +

info(message, opts?)

+

显示信息通知。蓝色圆形图标。

+
MeToast.info('系统将于 22:00 进行维护');
+ +

loading(message, opts?)

+

显示加载状态。返回一个控制对象，支持链式转换为 success/error/info/warning。

+
const loading = MeToast.loading('正在提交...');
+setTimeout(() => loading.success('提交成功！'), 2000);
+
+// 返回对象方法
+loading.success(msg, opts?)   // 转为成功
+loading.error(msg, opts?)     // 转为错误
+loading.info(msg, opts?)      // 转为信息
+loading.warning(msg, opts?)   // 转为警告
+loading.update(partial)         // 原地更新
+loading.dismiss()                // 关闭
+ + +

promise(promise, opts)

+

自动根据 Promise 状态切换 Toast。显示 loading → 自动 success/error。

+
await MeToast.promise(
+  fetch('/api/data'),
+  {
+    loading: '加载中...',
+    success: '加载完成！',
+    error: '加载失败',
+  }
+);
+ + + + + + +
参数类型说明
promisePromise要监听的 Promise 对象
opts.loadingstring加载中文本
opts.successstring成功时文本
opts.errorstring失败时文本
+ +

confirm(message, opts?)

+

确认对话框。返回 Promise<boolean>，用户点击确认返回 true。

+
const ok = await MeToast.confirm('确定删除吗？', {
+  confirmText: '删除',
+  confirmColor: '#ef4444',
+  cancelText: '取消',
+});
+if (ok) MeToast.success('已删除');
+ +

prompt(message, opts?)

+

输入对话框。返回 Promise<string|null>，用户取消返回 null。

+
const name = await MeToast.prompt('请输入姓名', {
+  placeholder: '请输入...',
+  defaultValue: '张三',
+});
+if (name) MeToast.info('你好，' + name + '！');
+ +

progress(message, opts?)

+

进度条通知。返回控制对象，可调用 setProgress / complete / error。

+
const p = MeToast.progress('上传中...');
+p.setProgress(30);
+p.setProgress(70);
+p.complete('上传完成！');
+// 或
+p.error('上传失败');
+p.dismiss();
+ +

countdown(message, seconds, opts?)

+

倒计时 Toast。{seconds} 占位符自动替换为剩余秒数。

+
MeToast.countdown('操作将在 {seconds} 秒后执行', 5, {
+  onComplete: () => MeToast.success('已执行'),
+});
+
+// 返回控制对象
+const c = MeToast.countdown('{seconds}s', 10);
+c.cancel();  // 取消并关闭
+c.pause();   // 暂停
+c.resume();  // 恢复
+ +

queue(messages, opts?)

+

队列展示：顺序逐个显示消息。返回可取消的 thenable 对象。

+
const q = MeToast.queue(['步骤一', '步骤二', '步骤三'], {
+  delay: 800,
+  duration: 2000,
+  type: 'info',
+});
+q.cancel(); // 取消队列
+await q;  // 等待队列完成
+ +

stack(messages, opts?)

+

堆叠展示：同时错峰显示多条消息。

+
MeToast.stack(['消息1', '消息2', '消息3', '消息4'], {
+  stagger: 150,
+  type: 'info',
+});
+ +

action(message, actions, opts?) v2.0

+

Action Toast：内嵌操作按钮的通知。类似 Android Snackbar。

+
MeToast.action('文件已删除', [
+  { text: '撤销', onClick: () => restore(), color: '#3b82f6' },
+  { text: '查看', onClick: () => openFile() },
+]);
+ + + + + + +
按钮字段类型说明
textstring按钮文本
onClickfunction点击回调，参数为 toast 实例
colorstring按钮背景色，默认 #6366f1
closeboolean点击后是否关闭 toast，默认 true
+ + +

group(name) v2.0

+

创建 Toast 分组。返回一个自动添加 group 参数的子对象，支持按组管理。

+
const orders = MeToast.group('orders');
+orders.success('订单已创建');
+orders.error('支付失败');
+orders.count();   // 该组的 toast 数量
+orders.dismiss(); // 关闭整组
+
+// 也可通过主对象关闭
+MeToast.dismissGroup('orders');
+ +

dismiss(id?)

+

关闭 Toast。无参数关闭所有，传 id 关闭指定。

+
MeToast.dismiss();       // 关闭所有
+MeToast.dismiss(toastId); // 关闭指定
+

其他管理方法：count() getToasts() pauseAll() resumeAll() destroy() clear()

+ +

configure(opts)

+

全局配置。影响后续所有 Toast。

+
MeToast.configure({
+  position: 'top-right',
+  duration: 4000,
+  theme: 'dark',
+  animation: 'slide',
+  locale: 'zh-CN',
+});
+ +

use(plugin)

+

安装插件。支持字符串（预设）和对象（自定义）。

+
MeToast.use('keyboard');      // ESC 关闭所有 Toast
+MeToast.use('persistence');   // 配置持久化到 localStorage
+MeToast.use('accessibility'); // 屏幕阅读器朗读
+
+// 自定义插件
+MeToast.use({
+  name: 'my-plugin',
+  install() {
+    Toast.on('afterShow', (t) => console.log(t.message));
+  },
+});
+ +

destroy()

+

完全销毁：关闭所有 Toast、移除 DOM 容器和样式标签。

+
MeToast.destroy();
+ + +

全部配置项

+

以下配置可用于 configure() 或单个 Toast 的第二个参数。

+ + + + + + + + + + + + + + + + + + + + + + + + +
配置项类型默认值说明
positionstring'top-right'位置：top-left/center/right、bottom-left/center/right
durationnumber4000显示时长(ms)，0=不自动关闭
maxnumber6同时最多显示条数
gapnumber12Toast 之间的间距(px)
offsetnumber24容器边距(px)
pauseOnHoverbooleantrue悬停时暂停计时
closeOnClickbooleantrue点击 Toast 关闭
draggablebooleantrue允许拖拽关闭
showProgressbooleantrue显示进度条
progressDirectionstring'horizontal'进度条方向：horizontal / vertical
iconbooleantrue显示类型图标
closeButtonbooleantrue显示关闭按钮
themestring'auto'主题：light / dark / auto / warm
animationstring'slide'动画效果（见下方列表）
zIndexnumber9999CSS z-index
widthnumber/string360Toast 宽度(px)
classNamestring''附加 CSS 类名
styleobject{}内联样式对象
localestring'zh-CN'语言代码
resetTimerOnUpdatebooleanfalseupdate()时重置计时器 v2.0
notifyWhenHiddenbooleanfalse页面不可见时发系统通知 v2.0
renderfunction—自定义渲染函数 v2.0
+ +

回调函数

+ + + + + + +
回调签名触发时机
onShow(toast) => voidToast 显示后
onClose(toast) => voidToast 关闭后
onClick(toast) => voidToast 被点击时
onUpdate(toast) => voidToast 内容更新后 v2.0
+ +

动画列表

+ + + + + + + + + + + + + +
名称效果时长
slide从右侧滑入 + 回弹400ms
fade纯淡入 (blur→清晰)500ms
scale弹性放大 (0.55→1.07→1)450ms
bounce从天而降四段弹跳650ms
flip3D 翻转入场 + 回摆500ms
rotate旋转摇摆进入500ms
zoom从中心爆发式弹出500ms
slideUp从下方弹入400ms
slideDown从上方弹入400ms
slideLeft从左侧滑入400ms
slideRight从右侧滑入400ms
+ +

主题参考

+
// 内置主题
+light   — 白色玻璃质感
+dark    — 深色玻璃质感
+auto    — 跟随系统
+warm    — 暖色调
+
+// 注册自定义主题
+MeToast.themes.registerTheme('ocean', {
+  bg: 'rgba(240,249,255,0.96)',
+  text: '#0c4a6e',
+  border: 'rgba(14,165,233,0.2)',
+  shadow: '0 10px 36px -10px rgba(14,165,233,0.18)',
+  hoverShadow: '0 14px 48px -10px rgba(14,165,233,0.22)',
+  progressBg: 'rgba(14,165,233,0.1)',
+  closeHoverBg: 'rgba(14,165,233,0.1)',
+});
+MeToast.themes.switchTheme('ocean');
+ +
+ + + + + diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..1e7a5d0 --- /dev/null +++ b/site/index.html @@ -0,0 +1,222 @@ + + + + + +MetonaToast — 轻量精致的 Toast 通知库 + + + + + + + +
+

MetonaToast

+

轻量 · 零依赖 · 精致美观的 Toast 通知库。纯原生 JavaScript，gzip 不到 10KB。

+
+ 📦 <10KB gzip🎨 107 图标🎭 11 动画🌍 国际化🔌 插件📘 TypeScript +
+
+ + +
+
+ +
+

核心特性

+

一切你需要的，都在一个不到 10KB 的包中

+
+
+
🎨
+

107 种图标类型

+

success / error / warning / info / loading 以及 100+ 扩展类型，覆盖所有常见场景。

+
+
+
🎭
+

11 种动画效果

+

slide / fade / scale / bounce / flip / rotate / zoom / slideUp / slideDown / slideLeft / slideRight，每种感官差异明显。

+
+
+
🖌️
+

主题系统

+

内置 light / dark / auto / warm 四种主题，支持 registerTheme() 自定义注册任意主题。

+
+
+
🌍
+

国际化

+

内置 zh-CN 和 en-US 完整翻译，400+ 词汇。支持 addTranslations() 扩展任意语言。

+
+
+
🔌
+

插件系统

+

3 款预设插件 + 自定义插件架构。keyboard / persistence / accessibility 开箱即用。

+
+
+
✋
+

拖拽关闭

+

任意方向拖动 Toast 即可关闭。支持 Pointer Events，移动端和桌面端体验一致。

+
+
+
⚡
+

零依赖

+

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

+
+
+
📘
+

TypeScript

+

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

+
+
+
+ +
+

快速开始

+

一行安装，三行代码即可使用

+
+ 
# npm 安装
+npm install metona-toast
+
+// 导入
+import MeToast from 'metona-toast';
+
+// 使用
+MeToast.success('操作成功！');
+MeToast.error('操作失败！');
+MeToast.loading('加载中...');
+
+// CDN 直接引用
+<script src="https://unpkg.com/metona-toast/dist/metona-toast.min.js"></script>
+
+
+ +
+

高级功能速览

+

不仅仅是一个 Toast——确认框、输入框、进度条、倒计时、队列，应有尽有

+
+ 
// Promise 风格 — 自动 loading → success/error
+await MeToast.promise(fetch('/api/data'), {
+  loading: '加载中...',
+  success: '加载完成！',
+  error: '加载失败',
+});
+
+// 确认对话框 → Promise<boolean>
+const ok = await MeToast.confirm('确定删除吗？', { confirmText: '删除' });
+
+// 输入对话框 → Promise<string|null>
+const name = await MeToast.prompt('请输入姓名');
+
+// Action Toast — 内嵌操作按钮
+MeToast.action('文件已删除', [
+  { text: '撤销', onClick: () => restore() },
+  { text: '查看', onClick: () => open() },
+]);
+
+// Toast 分组管理
+const orderGroup = MeToast.group('orders');
+orderGroup.success('订单已创建');
+orderGroup.dismiss(); // 一键关闭整组
+
+
+ +
+

主题切换

+

点击按钮实时预览四种内置主题

+
+ + + + +
+
+ + + + + + +