fix: demo页删除非规定的M别名,统一使用MeToast

This commit is contained in:
tianhao
2026-06-16 13:52:18 +08:00
parent a4401c74d2
commit f474b7251a
+46 -46
View File
@@ -70,19 +70,19 @@
<div class="card">
<div class="label">📢 基础通知</div>
<div class="btn-row">
<button class="btn c-s" onclick="M.success('操作成功!')">✓ 成功</button>
<button class="btn c-e" onclick="M.error('操作失败!')">✕ 错误</button>
<button class="btn c-w" onclick="M.warning('请注意检查')">⚠ 警告</button>
<button class="btn c-i" onclick="M.info('系统维护中')"> 信息</button>
<button class="btn c-sl" onclick="M.show('默认消息')">— 默认</button>
<button class="btn c-s" onclick="MeToast.success('操作成功!')">✓ 成功</button>
<button class="btn c-e" onclick="MeToast.error('操作失败!')">✕ 错误</button>
<button class="btn c-w" onclick="MeToast.warning('请注意检查')">⚠ 警告</button>
<button class="btn c-i" onclick="MeToast.info('系统维护中')"> 信息</button>
<button class="btn c-sl" onclick="MeToast.show('默认消息')">— 默认</button>
</div>
<div class="demo-section">
<div class="btn-row">
<button class="btn btn-outline btn-sm" onclick="M.success({title:'保存成功',message:'文件已同步到云端'})">带标题</button>
<button class="btn btn-outline btn-sm" onclick="M.info('显示10秒',{duration:10000})">长时10s</button>
<button class="btn btn-outline btn-sm" onclick="M.info('手动关闭',{duration:0})">手动关闭</button>
<button class="btn btn-outline btn-sm" onclick="M.info('隐藏图标',{icon:false})">无图标</button>
<button class="btn btn-outline btn-sm" onclick="M.info('隐藏进度条',{showProgress:false})">无进度条</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.success({title:'保存成功',message:'文件已同步到云端'})">带标题</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.info('显示10秒',{duration:10000})">长时10s</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.info('手动关闭',{duration:0})">手动关闭</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.info('隐藏图标',{icon:false})">无图标</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.info('隐藏进度条',{showProgress:false})">无进度条</button>
</div>
</div>
</div>
@@ -133,7 +133,7 @@
<div class="btn-row">
<button class="btn c-p" onclick="demoGroup()">创建分组</button>
<button class="btn c-e" onclick="dismissGroup()">关闭分组</button>
<button class="btn btn-outline btn-sm" onclick="M.info('分组数量: '+group.count())">查看数量</button>
<button class="btn btn-outline btn-sm" onclick="MeToast.info('分组数量: '+group.count())">查看数量</button>
</div>
</div>
@@ -159,12 +159,12 @@
<div class="card">
<div class="label">📍 位置</div>
<div class="btn-row">
<button class="btn c-sl" onclick="M.success('左上角',{position:'top-left'})">↖ top-left</button>
<button class="btn c-sl" onclick="M.success('顶部居中',{position:'top-center'})">↑ top-center</button>
<button class="btn c-sl" onclick="M.success('右上角',{position:'top-right'})">↗ top-right</button>
<button class="btn c-sl" onclick="M.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
<button class="btn c-sl" onclick="M.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
<button class="btn c-sl" onclick="M.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
<button class="btn c-sl" onclick="MeToast.success('左上角',{position:'top-left'})">↖ top-left</button>
<button class="btn c-sl" onclick="MeToast.success('顶部居中',{position:'top-center'})">↑ top-center</button>
<button class="btn c-sl" onclick="MeToast.success('右上角',{position:'top-right'})">↗ top-right</button>
<button class="btn c-sl" onclick="MeToast.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
<button class="btn c-sl" onclick="MeToast.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
<button class="btn c-sl" onclick="MeToast.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
</div>
</div>
@@ -183,9 +183,9 @@
<div class="card">
<div class="label">🔌 插件</div>
<div class="btn-row">
<button class="btn c-p" onclick="M.use('keyboard');M.info('已安装 — 试试按 ESC 键','keyboard插件')">keyboard ESC关闭</button>
<button class="btn c-i" onclick="M.use('persistence');M.info('已安装 — 配置将自动保存','persistence插件')">persistence 持久化</button>
<button class="btn c-t" onclick="M.use('accessibility');M.info('已安装 — 屏幕阅读器可用','accessibility插件')">accessibility 无障碍</button>
<button class="btn c-p" onclick="MeToast.use('keyboard');MeToast.info('已安装 — 试试按 ESC 键','keyboard插件')">keyboard ESC关闭</button>
<button class="btn c-i" onclick="MeToast.use('persistence');MeToast.info('已安装 — 配置将自动保存','persistence插件')">persistence 持久化</button>
<button class="btn c-t" onclick="MeToast.use('accessibility');MeToast.info('已安装 — 屏幕阅读器可用','accessibility插件')">accessibility 无障碍</button>
</div>
</div>
@@ -193,12 +193,12 @@
<div class="card">
<div class="label">🔧 Toast 管理</div>
<div class="btn-row">
<button class="btn c-s" onclick="M.success('消息 '+(M.count()+1))">发一条</button>
<button class="btn c-i" onclick="M.info('消息 '+(M.count()+1))">再发一条</button>
<button class="btn c-w" onclick="M.info('当前共 '+M.count()+' 条消息')">查看数量</button>
<button class="btn c-e" onclick="M.dismiss()">关闭全部</button>
<button class="btn c-sl" onclick="M.pauseAll();M.info('已暂停全部计时')">暂停全部</button>
<button class="btn c-sl" onclick="M.resumeAll();M.info('已恢复全部计时')">恢复全部</button>
<button class="btn c-s" onclick="MeToast.success('消息 '+(MeToast.count()+1))">发一条</button>
<button class="btn c-i" onclick="MeToast.info('消息 '+(MeToast.count()+1))">再发一条</button>
<button class="btn c-w" onclick="MeToast.info('当前共 '+MeToast.count()+' 条消息')">查看数量</button>
<button class="btn c-e" onclick="MeToast.dismiss()">关闭全部</button>
<button class="btn c-sl" onclick="MeToast.pauseAll();MeToast.info('已暂停全部计时')">暂停全部</button>
<button class="btn c-sl" onclick="MeToast.resumeAll();MeToast.info('已恢复全部计时')">恢复全部</button>
</div>
</div>
@@ -210,50 +210,50 @@
<script src="../dist/metona-toast.js"></script>
<script>
const M = MeToast;
M.configure({ position:'top-right', duration:4000, theme:'dark', animation:'slide', pauseOnHover:true, showProgress:true });
MeToast.configure({ position:'top-right', duration:4000, theme:'dark', animation:'slide', pauseOnHover:true, showProgress:true });
// Loading
function demoLoading() { const l=M.loading('正在提交...'); setTimeout(()=>l.success('提交成功!'),2000); }
function demoLoadingFail() { const l=M.loading('正在提交...'); setTimeout(()=>l.error('提交失败,请重试'),2000); }
function demoLoading() { const l=MeToast.loading('正在提交...'); setTimeout(()=>l.success('提交成功!'),2000); }
function demoLoadingFail() { const l=MeToast.loading('正在提交...'); setTimeout(()=>l.error('提交失败,请重试'),2000); }
async function demoPromise() {
const p=new Promise((r,e)=>setTimeout(()=>Math.random()>0.3?r('ok'):e('fail'),2000));
try{await M.promise(p,{loading:'处理中...',success:'成功!',error:'失败'});}catch(_){}
try{await MeToast.promise(p,{loading:'处理中...',success:'成功!',error:'失败'});}catch(_){}
}
// 对话框
async function demoConfirm() { const ok=await M.confirm('确定删除吗?',{confirmText:'删除',confirmColor:'#ef4444'}); if(ok)M.success('已删除'); else M.info('已取消'); }
async function demoPrompt() { const v=await M.prompt('请输入姓名',{placeholder:'请输入...'}); if(v) M.info('你好,'+v+''); }
async function demoConfirm() { const ok=await MeToast.confirm('确定删除吗?',{confirmText:'删除',confirmColor:'#ef4444'}); if(ok)MeToast.success('已删除'); else MeToast.info('已取消'); }
async function demoPrompt() { const v=await MeToast.prompt('请输入姓名',{placeholder:'请输入...'}); if(v) MeToast.info('你好,'+v+''); }
// 进度 & 队列
function demoProgress() { const p=M.progress('上传中...'); let v=0; const t=setInterval(()=>{v+=Math.random()*28; if(v>=100){clearInterval(t);p.complete('完成!');}else p.setProgress(v);},400); }
function demoCountdown() { M.countdown('{seconds} 秒后执行',5,{onComplete:()=>M.success('已执行')}); }
async function demoQueue() { await M.queue(['步骤一','步骤二','步骤三'],{delay:800,duration:2000,type:'info'}); }
function demoStack() { M.stack(['消息1','消息2','消息3','消息4'],{stagger:150,type:'info'}); }
function demoProgress() { 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); }
function demoCountdown() { MeToast.countdown('{seconds} 秒后执行',5,{onComplete:()=>MeToast.success('已执行')}); }
async function demoQueue() { await MeToast.queue(['步骤一','步骤二','步骤三'],{delay:800,duration:2000,type:'info'}); }
function demoStack() { MeToast.stack(['消息1','消息2','消息3','消息4'],{stagger:150,type:'info'}); }
// Action
function demoActionDelete() {
let deleted=true;
M.action('文件 data.json 已删除',[{text:'撤销',onClick:()=>{deleted=false;M.success('已撤销删除');},color:'#3b82f6'}]);
MeToast.action('文件 data.json 已删除',[{text:'撤销',onClick:()=>{deleted=false;MeToast.success('已撤销删除');},color:'#3b82f6'}]);
}
function demoActionMulti() {
M.action('邮件已发送',[
{text:'查看',onClick:()=>M.info('打开邮件详情'),color:'#3b82f6'},
{text:'撤回',onClick:()=>M.warning('邮件已撤回'),color:'#f59e0b'},
MeToast.action('邮件已发送',[
{text:'查看',onClick:()=>MeToast.info('打开邮件详情'),color:'#3b82f6'},
{text:'撤回',onClick:()=>MeToast.warning('邮件已撤回'),color:'#f59e0b'},
]);
}
function demoActionSuccess() {
M.action('上传完成',[{text:'查看文件',onClick:()=>M.info('打开文件管理器'),color:'#10b981'}]);
MeToast.action('上传完成',[{text:'查看文件',onClick:()=>MeToast.info('打开文件管理器'),color:'#10b981'}]);
}
// 分组
const group = M.group('demo-group');
const group = MeToast.group('demo-group');
function demoGroup() { group.success('分组消息 #'+(group.count()+1)); group.info('分组消息 #'+(group.count()+1)); }
function dismissGroup() { M.dismissGroup('demo-group'); M.info('已关闭 demo-group 分组'); }
function dismissGroup() { MeToast.dismissGroup('demo-group'); MeToast.info('已关闭 demo-group 分组'); }
// 动画
function anim(name) { M.success('动画: '+name,{animation:name,duration:3000}); }
function switchTheme(t) { M.themes.switchTheme(t); M.configure({theme:t}); const n={light:'浅色',dark:'深色',auto:'自动',warm:'暖色'}; M.info('主题: '+n[t],{theme:t}); }
function anim(name) { MeToast.success('动画: '+name,{animation:name,duration:3000}); }
function switchTheme(t) { MeToast.themes.switchTheme(t); MeToast.configure({theme:t}); const n={light:'浅色',dark:'深色',auto:'自动',warm:'暖色'}; MeToast.info('主题: '+n[t],{theme:t}); }
</script>
</body>
</html>