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
|
* 队列Toast
|
||||||
* @param {Array} messages - 消息数组
|
* @param {Array} messages - 消息数组
|
||||||
|
|||||||
Reference in New Issue
Block a user