497 lines
15 KiB
JavaScript
497 lines
15 KiB
JavaScript
|
/**
|
|||
|
|
* Toast 消息提醒组件 - iOS风格
|
|||
|
|
* 使用方法：
|
|||
|
|
* Toast.show('消息内容')
|
|||
|
|
* Toast.success('成功消息')
|
|||
|
|
* Toast.error('错误消息')
|
|||
|
|
* Toast.warning('警告消息')
|
|||
|
|
* Toast.info('提示消息')
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const Toast = (function() {
|
|||
|
|
// 消息类型配置
|
|||
|
|
const TYPES = {
|
|||
|
|
success: {
|
|||
|
|
icon: '✓',
|
|||
|
|
color: '#34C759',
|
|||
|
|
iconBg: 'rgba(52, 199, 89, 0.15)'
|
|||
|
|
},
|
|||
|
|
error: {
|
|||
|
|
icon: '✕',
|
|||
|
|
color: '#FF3B30',
|
|||
|
|
iconBg: 'rgba(255, 59, 48, 0.15)'
|
|||
|
|
},
|
|||
|
|
warning: {
|
|||
|
|
icon: '!',
|
|||
|
|
color: '#FF9500',
|
|||
|
|
iconBg: 'rgba(255, 149, 0, 0.15)'
|
|||
|
|
},
|
|||
|
|
info: {
|
|||
|
|
icon: 'i',
|
|||
|
|
color: '#007AFF',
|
|||
|
|
iconBg: 'rgba(0, 122, 255, 0.15)'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 默认配置
|
|||
|
|
const DEFAULT_OPTIONS = {
|
|||
|
|
duration: 2500, // 显示时长（毫秒）
|
|||
|
|
position: 'top-center', // 位置：top-center, top-right, bottom-center, center
|
|||
|
|
showIcon: true, // 是否显示图标
|
|||
|
|
animation: true // 是否使用动画
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 当前显示的toast队列
|
|||
|
|
let toastQueue = [];
|
|||
|
|
let container = null;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化容器
|
|||
|
|
*/
|
|||
|
|
function initContainer() {
|
|||
|
|
if (!container) {
|
|||
|
|
container = document.createElement('div');
|
|||
|
|
container.className = 'toast-container';
|
|||
|
|
document.body.appendChild(container);
|
|||
|
|
}
|
|||
|
|
return container;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建Toast元素
|
|||
|
|
*/
|
|||
|
|
function createToast(message, type = 'info', options = {}) {
|
|||
|
|
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|||
|
|
const config = TYPES[type] || TYPES.info;
|
|||
|
|
|
|||
|
|
const toast = document.createElement('div');
|
|||
|
|
toast.className = `toast toast-${type} toast-${opts.position}`;
|
|||
|
|
|
|||
|
|
if (opts.animation) {
|
|||
|
|
toast.classList.add('toast-enter');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建toast内容
|
|||
|
|
let html = '<div class="toast-content">';
|
|||
|
|
|
|||
|
|
if (opts.showIcon) {
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-icon" style="background-color: ${config.iconBg}; color: ${config.color}">
|
|||
|
|
<span>${config.icon}</span>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-message">${message}</div>
|
|||
|
|
</div>`;
|
|||
|
|
|
|||
|
|
toast.innerHTML = html;
|
|||
|
|
|
|||
|
|
return { element: toast, duration: opts.duration };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示Toast
|
|||
|
|
*/
|
|||
|
|
function show(message, type = 'info', options = {}) {
|
|||
|
|
const toastContainer = initContainer();
|
|||
|
|
const { element, duration } = createToast(message, type, options);
|
|||
|
|
|
|||
|
|
// 添加到DOM
|
|||
|
|
toastContainer.appendChild(element);
|
|||
|
|
toastQueue.push(element);
|
|||
|
|
|
|||
|
|
// 触发入场动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
element.classList.remove('toast-enter');
|
|||
|
|
element.classList.add('toast-visible');
|
|||
|
|
}, 10);
|
|||
|
|
|
|||
|
|
// 自动移除
|
|||
|
|
setTimeout(() => {
|
|||
|
|
hide(element);
|
|||
|
|
}, duration);
|
|||
|
|
|
|||
|
|
return element;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 隐藏Toast
|
|||
|
|
*/
|
|||
|
|
function hide(toastElement) {
|
|||
|
|
if (!toastElement || !toastElement.parentNode) return;
|
|||
|
|
|
|||
|
|
toastElement.classList.remove('toast-visible');
|
|||
|
|
toastElement.classList.add('toast-exit');
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (toastElement.parentNode) {
|
|||
|
|
toastElement.parentNode.removeChild(toastElement);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从队列中移除
|
|||
|
|
const index = toastQueue.indexOf(toastElement);
|
|||
|
|
if (index > -1) {
|
|||
|
|
toastQueue.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果队列为空，移除容器
|
|||
|
|
if (toastQueue.length === 0 && container) {
|
|||
|
|
container.remove();
|
|||
|
|
container = null;
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清除所有Toast
|
|||
|
|
*/
|
|||
|
|
function clear() {
|
|||
|
|
toastQueue.forEach(toast => hide(toast));
|
|||
|
|
toastQueue = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 快捷方法
|
|||
|
|
function success(message, options) {
|
|||
|
|
return show(message, 'success', options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function error(message, options) {
|
|||
|
|
return show(message, 'error', options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function warning(message, options) {
|
|||
|
|
return show(message, 'warning', options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function info(message, options) {
|
|||
|
|
return show(message, 'info', options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 提示对话框（iOS风格，只有一个确定按钮）
|
|||
|
|
*/
|
|||
|
|
function alert(options = {}) {
|
|||
|
|
// 支持直接传字符串或对象
|
|||
|
|
if (typeof options === 'string') {
|
|||
|
|
options = { message: options };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const opts = {
|
|||
|
|
title: options.title || '',
|
|||
|
|
message: options.message || '',
|
|||
|
|
confirmText: options.confirmText || i18n?.t?.('confirm') || '确定',
|
|||
|
|
confirmColor: options.confirmColor || '#007AFF',
|
|||
|
|
...options
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建遮罩层
|
|||
|
|
const overlay = document.createElement('div');
|
|||
|
|
overlay.className = 'toast-overlay';
|
|||
|
|
|
|||
|
|
// 创建对话框
|
|||
|
|
const dialog = document.createElement('div');
|
|||
|
|
dialog.className = 'toast-dialog';
|
|||
|
|
|
|||
|
|
let html = '<div class="toast-dialog-content">';
|
|||
|
|
|
|||
|
|
if (opts.title) {
|
|||
|
|
html += `<div class="toast-dialog-title">${opts.title}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (opts.message) {
|
|||
|
|
html += `<div class="toast-dialog-message">${opts.message}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 只有一个确定按钮
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-dialog-buttons toast-dialog-single-button">
|
|||
|
|
<button class="toast-dialog-button toast-dialog-confirm" style="color: ${opts.confirmColor}">
|
|||
|
|
${opts.confirmText}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
|
|||
|
|
dialog.innerHTML = html;
|
|||
|
|
|
|||
|
|
// 添加到DOM
|
|||
|
|
overlay.appendChild(dialog);
|
|||
|
|
document.body.appendChild(overlay);
|
|||
|
|
|
|||
|
|
// 触发动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.classList.add('toast-overlay-visible');
|
|||
|
|
dialog.classList.add('toast-dialog-visible');
|
|||
|
|
}, 10);
|
|||
|
|
|
|||
|
|
// 按钮事件
|
|||
|
|
const confirmBtn = dialog.querySelector('.toast-dialog-confirm');
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
overlay.classList.remove('toast-overlay-visible');
|
|||
|
|
dialog.classList.remove('toast-dialog-visible');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.remove();
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', () => {
|
|||
|
|
close();
|
|||
|
|
resolve(true);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击遮罩关闭
|
|||
|
|
if (opts.closeOnClickOverlay !== false) {
|
|||
|
|
overlay.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === overlay) {
|
|||
|
|
close();
|
|||
|
|
resolve(true);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 确认对话框（iOS风格）
|
|||
|
|
*/
|
|||
|
|
function confirm(options = {}) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const opts = {
|
|||
|
|
title: options.title || '',
|
|||
|
|
message: options.message || '',
|
|||
|
|
confirmText: options.confirmText || i18n.t('confirm') || '确定',
|
|||
|
|
cancelText: options.cancelText || i18n.t('cancel') || '取消',
|
|||
|
|
confirmColor: options.confirmColor || '#007AFF',
|
|||
|
|
cancelColor: options.cancelColor || '#8E8E93',
|
|||
|
|
...options
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建遮罩层
|
|||
|
|
const overlay = document.createElement('div');
|
|||
|
|
overlay.className = 'toast-overlay';
|
|||
|
|
|
|||
|
|
// 创建对话框
|
|||
|
|
const dialog = document.createElement('div');
|
|||
|
|
dialog.className = 'toast-dialog';
|
|||
|
|
|
|||
|
|
let html = '<div class="toast-dialog-content">';
|
|||
|
|
|
|||
|
|
if (opts.title) {
|
|||
|
|
html += `<div class="toast-dialog-title">${opts.title}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (opts.message) {
|
|||
|
|
html += `<div class="toast-dialog-message">${opts.message}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-dialog-buttons">
|
|||
|
|
<button class="toast-dialog-button toast-dialog-cancel" style="color: ${opts.cancelColor}">
|
|||
|
|
${opts.cancelText}
|
|||
|
|
</button>
|
|||
|
|
<button class="toast-dialog-button toast-dialog-confirm" style="color: ${opts.confirmColor}">
|
|||
|
|
${opts.confirmText}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
|
|||
|
|
dialog.innerHTML = html;
|
|||
|
|
|
|||
|
|
// 添加到DOM
|
|||
|
|
overlay.appendChild(dialog);
|
|||
|
|
document.body.appendChild(overlay);
|
|||
|
|
|
|||
|
|
// 触发动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.classList.add('toast-overlay-visible');
|
|||
|
|
dialog.classList.add('toast-dialog-visible');
|
|||
|
|
}, 10);
|
|||
|
|
|
|||
|
|
// 按钮事件
|
|||
|
|
const confirmBtn = dialog.querySelector('.toast-dialog-confirm');
|
|||
|
|
const cancelBtn = dialog.querySelector('.toast-dialog-cancel');
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
overlay.classList.remove('toast-overlay-visible');
|
|||
|
|
dialog.classList.remove('toast-dialog-visible');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.remove();
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
confirmBtn.addEventListener('click', () => {
|
|||
|
|
close();
|
|||
|
|
resolve(true);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
cancelBtn.addEventListener('click', () => {
|
|||
|
|
close();
|
|||
|
|
resolve(false);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击遮罩关闭
|
|||
|
|
if (opts.closeOnClickOverlay !== false) {
|
|||
|
|
overlay.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === overlay) {
|
|||
|
|
close();
|
|||
|
|
resolve(false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 输入对话框（iOS风格）
|
|||
|
|
*/
|
|||
|
|
function prompt(options = {}) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const opts = {
|
|||
|
|
title: options.title || '',
|
|||
|
|
message: options.message || '',
|
|||
|
|
placeholder: options.placeholder || '',
|
|||
|
|
defaultValue: options.defaultValue || '',
|
|||
|
|
inputType: options.inputType || 'text',
|
|||
|
|
confirmText: options.confirmText || i18n.t('confirm') || '确定',
|
|||
|
|
cancelText: options.cancelText || i18n.t('cancel') || '取消',
|
|||
|
|
confirmColor: options.confirmColor || '#007AFF',
|
|||
|
|
cancelColor: options.cancelColor || '#8E8E93',
|
|||
|
|
maxLength: options.maxLength || null,
|
|||
|
|
...options
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建遮罩层
|
|||
|
|
const overlay = document.createElement('div');
|
|||
|
|
overlay.className = 'toast-overlay';
|
|||
|
|
|
|||
|
|
// 创建对话框
|
|||
|
|
const dialog = document.createElement('div');
|
|||
|
|
dialog.className = 'toast-dialog toast-prompt-dialog';
|
|||
|
|
|
|||
|
|
let html = '<div class="toast-dialog-content">';
|
|||
|
|
|
|||
|
|
if (opts.title) {
|
|||
|
|
html += `<div class="toast-dialog-title">${opts.title}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (opts.message) {
|
|||
|
|
html += `<div class="toast-dialog-message">${opts.message}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 输入框
|
|||
|
|
const maxLengthAttr = opts.maxLength ? `maxlength="${opts.maxLength}"` : '';
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-input-wrapper">
|
|||
|
|
<input
|
|||
|
|
type="${opts.inputType}"
|
|||
|
|
class="toast-input"
|
|||
|
|
placeholder="${opts.placeholder}"
|
|||
|
|
value="${opts.defaultValue}"
|
|||
|
|
${maxLengthAttr}
|
|||
|
|
autocomplete="off"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="toast-dialog-buttons">
|
|||
|
|
<button class="toast-dialog-button toast-dialog-cancel" style="color: ${opts.cancelColor}">
|
|||
|
|
${opts.cancelText}
|
|||
|
|
</button>
|
|||
|
|
<button class="toast-dialog-button toast-dialog-confirm" style="color: ${opts.confirmColor}">
|
|||
|
|
${opts.confirmText}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
|
|||
|
|
dialog.innerHTML = html;
|
|||
|
|
|
|||
|
|
// 添加到DOM
|
|||
|
|
overlay.appendChild(dialog);
|
|||
|
|
document.body.appendChild(overlay);
|
|||
|
|
|
|||
|
|
// 获取输入框
|
|||
|
|
const input = dialog.querySelector('.toast-input');
|
|||
|
|
const confirmBtn = dialog.querySelector('.toast-dialog-confirm');
|
|||
|
|
const cancelBtn = dialog.querySelector('.toast-dialog-cancel');
|
|||
|
|
|
|||
|
|
// 触发动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.classList.add('toast-overlay-visible');
|
|||
|
|
dialog.classList.add('toast-dialog-visible');
|
|||
|
|
// 自动聚焦并选中文本
|
|||
|
|
input.focus();
|
|||
|
|
if (opts.defaultValue) {
|
|||
|
|
input.select();
|
|||
|
|
}
|
|||
|
|
}, 10);
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
overlay.classList.remove('toast-overlay-visible');
|
|||
|
|
dialog.classList.remove('toast-dialog-visible');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
overlay.remove();
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleConfirm() {
|
|||
|
|
const value = input.value;
|
|||
|
|
close();
|
|||
|
|
resolve(value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleCancel() {
|
|||
|
|
close();
|
|||
|
|
resolve(null);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按钮事件
|
|||
|
|
confirmBtn.addEventListener('click', handleConfirm);
|
|||
|
|
cancelBtn.addEventListener('click', handleCancel);
|
|||
|
|
|
|||
|
|
// 回车确认
|
|||
|
|
input.addEventListener('keypress', (e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
handleConfirm();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// ESC取消
|
|||
|
|
input.addEventListener('keydown', (e) => {
|
|||
|
|
if (e.key === 'Escape') {
|
|||
|
|
handleCancel();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击遮罩关闭
|
|||
|
|
if (opts.closeOnClickOverlay !== false) {
|
|||
|
|
overlay.addEventListener('click', (e) => {
|
|||
|
|
if (e.target === overlay) {
|
|||
|
|
handleCancel();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导出API
|
|||
|
|
return {
|
|||
|
|
show,
|
|||
|
|
success,
|
|||
|
|
error,
|
|||
|
|
warning,
|
|||
|
|
info,
|
|||
|
|
alert,
|
|||
|
|
confirm,
|
|||
|
|
prompt,
|
|||
|
|
clear,
|
|||
|
|
hide
|
|||
|
|
};
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// 全局暴露
|
|||
|
|
window.Toast = Toast;
|