81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
// 创建 rk 对象
|
||
const rk = {
|
||
activeTips: [], // 当前激活的提示框数组
|
||
};
|
||
|
||
// 定义 rk.tip 函数
|
||
rk.tip = function(a, b, c) {
|
||
// 移除所有活动提示框
|
||
this.removeAllTips();
|
||
|
||
// 创建新的提示框
|
||
this.createTip(a, b, c);
|
||
};
|
||
|
||
// 创建提示框的辅助函数
|
||
rk.createTip = function(a, b, c) {
|
||
// 创建提示框元素
|
||
const tipElement = document.createElement('div');
|
||
tipElement.style.width = '80%';
|
||
tipElement.style.right = '10px';
|
||
tipElement.style.maxWidth = '512px';
|
||
tipElement.style.position = 'fixed';
|
||
tipElement.style.zIndex = '1000000';
|
||
tipElement.className = 'mdui-list-item mdui-ripple mdui-card rk-j-ro';
|
||
|
||
|
||
|
||
// 添加内容到提示框
|
||
tipElement.innerHTML = `
|
||
<i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">fiber_manual_record</i>
|
||
<div class="mdui-list-item-content">
|
||
<div class="mdui-list-item-title">${a}</div>
|
||
<div class="mdui-list-item-text">${b}</div>
|
||
</div>`;
|
||
|
||
// 添加到文档主体和当前活动提示框数组中
|
||
document.body.appendChild(tipElement);
|
||
this.activeTips.push(tipElement); // 保存当前提示框
|
||
|
||
// 显示动画
|
||
setTimeout(() => {
|
||
tipElement.classList.add('rk-tip-in'); // 添加出现时的类
|
||
}, 0); // 延迟以显示动画
|
||
|
||
// 计算显示时间，确保最短为2秒
|
||
const showTime = Math.max(c * 1000 + 1000, 1000);
|
||
|
||
// 开始计时以移除提示框
|
||
setTimeout(() => {
|
||
this.removeTip(tipElement);
|
||
}, showTime);
|
||
};
|
||
|
||
// 定义移除单个提示框的辅助函数
|
||
rk.removeTip = function(tipElement) {
|
||
if (!tipElement) return;
|
||
|
||
// 立即添加 rk-tip-out 类以开始移除过程
|
||
tipElement.classList.remove('rk-tip-in');
|
||
tipElement.classList.add('rk-tip-out');
|
||
|
||
// 0.5秒后删除 DOM 结构
|
||
setTimeout(() => {
|
||
document.body.removeChild(tipElement);
|
||
this.activeTips = this.activeTips.filter(tip => tip !== tipElement); // 从数组中移除
|
||
}, 1000); // 动画持续时间
|
||
};
|
||
|
||
// 定义移除所有提示框的函数
|
||
rk.removeAllTips = function() {
|
||
// 遍历并移除所有活动提示框
|
||
this.activeTips.forEach(tipElement => {
|
||
this.removeTip(tipElement);
|
||
});
|
||
};
|
||
|
||
// 定义 rk.tip.re 函数
|
||
rk.tip.re = function() {
|
||
this.removeAllTips();
|
||
};
|