121 lines
4.1 KiB
HTML
121 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Toast 测试</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
padding: 20px;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
.toast {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
bottom: 24px;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background: var(--surface-2);
|
|||
|
|
color: var(--text);
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: opacity .2s ease;
|
|||
|
|
}
|
|||
|
|
.toast.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
margin: 10px;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>Toast 测试页面</h1>
|
|||
|
|
|
|||
|
|
<button onclick="testShort()">短提示 (2秒)</button>
|
|||
|
|
<button onclick="testMedium()">中等提示 (5秒)</button>
|
|||
|
|
<button onclick="testLong()">长提示 (10秒)</button>
|
|||
|
|
<button onclick="testExtraLong()">超长提示 (15秒)</button>
|
|||
|
|
<button onclick="testMultiLine()">多行提示</button>
|
|||
|
|
|
|||
|
|
<div id="toast" class="toast"></div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 存储当前的toast定时器
|
|||
|
|
let toastTimer = null;
|
|||
|
|
|
|||
|
|
function toast(msg, type = 'info', duration = 2000) {
|
|||
|
|
const t = document.getElementById('toast');
|
|||
|
|
|
|||
|
|
// 清除之前的定时器
|
|||
|
|
if (toastTimer) {
|
|||
|
|
clearTimeout(toastTimer);
|
|||
|
|
toastTimer = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
t.textContent = msg;
|
|||
|
|
|
|||
|
|
// 添加类型样式
|
|||
|
|
if (type === 'success') {
|
|||
|
|
t.style.backgroundColor = '#10b981';
|
|||
|
|
t.style.color = 'white';
|
|||
|
|
} else if (type === 'error') {
|
|||
|
|
t.style.backgroundColor = '#ef4444';
|
|||
|
|
t.style.color = 'white';
|
|||
|
|
} else if (type === 'warning') {
|
|||
|
|
t.style.backgroundColor = '#f59e0b';
|
|||
|
|
t.style.color = 'white';
|
|||
|
|
} else {
|
|||
|
|
t.style.backgroundColor = '#3b82f6';
|
|||
|
|
t.style.color = 'white';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 支持多行文本
|
|||
|
|
t.style.whiteSpace = 'pre-line';
|
|||
|
|
|
|||
|
|
// 添加show类来显示toast
|
|||
|
|
t.classList.add('show');
|
|||
|
|
|
|||
|
|
// 调试信息
|
|||
|
|
console.log(`Toast显示: 类型=${type}, 持续时间=${duration}ms, 消息长度=${msg.length}`);
|
|||
|
|
console.log('当前时间:', new Date().toLocaleTimeString());
|
|||
|
|
|
|||
|
|
toastTimer = setTimeout(() => {
|
|||
|
|
t.classList.remove('show');
|
|||
|
|
// 重置样式
|
|||
|
|
t.style.backgroundColor = '';
|
|||
|
|
t.style.color = '';
|
|||
|
|
t.style.whiteSpace = '';
|
|||
|
|
toastTimer = null;
|
|||
|
|
console.log('Toast已隐藏');
|
|||
|
|
console.log('隐藏时间:', new Date().toLocaleTimeString());
|
|||
|
|
}, duration);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testShort() {
|
|||
|
|
toast('这是一个2秒的短提示', 'info', 2000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testMedium() {
|
|||
|
|
toast('这是一个5秒的中等提示', 'success', 5000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testLong() {
|
|||
|
|
toast('这是一个10秒的长提示\n可以显示多行文本', 'warning', 10000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testExtraLong() {
|
|||
|
|
toast('这是一个15秒的超长提示\n用于测试刷新单价功能\n包含详细信息\n1. 第一条信息\n2. 第二条信息\n3. 第三条信息', 'success', 15000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function testMultiLine() {
|
|||
|
|
toast('成功更新 5 条对账单的单价\n\n详细信息：\n1. ID=123, 合同=CGDD002878, 物料=AP-DZ006灯条基站, 单价: 200 → 239.2\n2. ID=124, 合同=CGDD002878, 物料=WD1MK0SMD0551蓝牙模块, 单价: 1.0 → 1.1\n3. ID=125, 合同=CGDD002879, 物料=AP-DZ009灯条基站, 单价: 220 → 229.61', 'success', 15000);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|