feat: Action Toast — 内嵌操作按钮的通知
This commit is contained in:
+49
@@ -591,6 +591,21 @@ const _progressHTML = (opts) => {
|
||||
`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Action Toast 模板
|
||||
* @param {Array} actions - 操作按钮数组 [{ text, onClick, style }]
|
||||
* @returns {string} HTML
|
||||
*/
|
||||
const _actionHTML = (actions) => {
|
||||
if (!Array.isArray(actions) || actions.length === 0) return '';
|
||||
const buttons = actions.map((a, i) => {
|
||||
const bg = a.style?.background || a.color || '#6366f1';
|
||||
const cls = `met-action-btn-${i}`;
|
||||
return `<button class="${cls}" style="flex:1;padding:6px 12px;border:none;border-radius:6px;background:${bg};color:white;cursor:pointer;font-size:12px;font-weight:500">${escapeHTML(a.text || '')}</button>`;
|
||||
}).join('');
|
||||
return _btnRow(buttons);
|
||||
};
|
||||
|
||||
/**
|
||||
* 主对象
|
||||
*/
|
||||
@@ -980,6 +995,40 @@ const meToast = {
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Action Toast — 带操作按钮的通知
|
||||
* @param {string|Object} messageOrOpts - 消息
|
||||
* @param {Array} actions - 操作按钮 [{ text, onClick, color }]
|
||||
* @param {Object} [opts] - 选项
|
||||
* @returns {Object} toast实例 + dismiss
|
||||
*/
|
||||
action(messageOrOpts, actions = [], opts = {}) {
|
||||
const normalized = normalizeArgs([messageOrOpts, opts], 'info');
|
||||
normalized.duration = opts.duration ?? 0;
|
||||
normalized.closeButton = opts.closeButton ?? true;
|
||||
|
||||
const t = this._emit({
|
||||
...normalized,
|
||||
html: _actionHTML(actions) + (normalized.html || ''),
|
||||
});
|
||||
|
||||
if (Array.isArray(actions)) {
|
||||
setTimeout(() => {
|
||||
actions.forEach((a, i) => {
|
||||
const btn = t.el?.querySelector(`.met-action-btn-${i}`);
|
||||
if (btn && typeof a.onClick === 'function') {
|
||||
btn.addEventListener('click', () => {
|
||||
try { a.onClick(t); } catch (e) { console.error('Action onClick error:', e); }
|
||||
if (a.close !== false) t.close();
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
return { id: t.id, toast: t, dismiss: () => t.close() };
|
||||
},
|
||||
|
||||
/**
|
||||
* 队列Toast
|
||||
* @param {Array} messages - 消息数组
|
||||
|
||||
Reference in New Issue
Block a user