mr-component
Version:
A library for Mr components
229 lines (213 loc) • 7.91 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MrButton 测试页面</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC';
padding: 20px;
background: #f7f8fa;
}
.test-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.test-section {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.test-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.button-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.status {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
font-size: 14px;
}
.status.success {
background: #f0f9ff;
color: #0369a1;
border: 1px solid #7dd3fc;
}
.status.error {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fca5a5;
}
</style>
</head>
<body>
<div class="test-container">
<h1>🧪 MrButton 组件测试</h1>
<p>此页面用于测试MrButton组件是否正常工作</p>
<div class="test-section">
<div class="test-title">✅ 组件加载测试</div>
<div id="component-status" class="status">正在检测组件...</div>
</div>
<div class="test-section">
<div class="test-title">🎨 样式变体测试</div>
<div class="button-group">
<button onclick="testVariant('payment-primary')">测试 payment-primary</button>
<button onclick="testVariant('payment-secondary')">测试 payment-secondary</button>
<button onclick="testVariant('success-action')">测试 success-action</button>
</div>
<div
id="variant-result"
style="margin-top: 10px; min-height: 50px; border: 1px dashed #ccc; padding: 10px"
>
变体测试结果将显示在这里
</div>
</div>
<div class="test-section">
<div class="test-title">📏 字体大小测试</div>
<div class="button-group">
<button onclick="testFontSize('h4')">测试 h4</button>
<button onclick="testFontSize('h5')">测试 h5</button>
<button onclick="testFontSize('h6')">测试 h6</button>
<button onclick="testFontSize('h7')">测试 h7</button>
</div>
<div
id="font-result"
style="margin-top: 10px; min-height: 50px; border: 1px dashed #ccc; padding: 10px"
>
字体大小测试结果将显示在这里
</div>
</div>
<div class="test-section">
<div class="test-title">💰 金额样式测试</div>
<div class="button-group">
<button onclick="testAmount(true)">启用金额样式</button>
<button onclick="testAmount(false)">禁用金额样式</button>
</div>
<div
id="amount-result"
style="margin-top: 10px; min-height: 50px; border: 1px dashed #ccc; padding: 10px"
>
金额样式测试结果将显示在这里
</div>
</div>
</div>
<script>
// 检查组件是否正确导出
function checkComponentStatus() {
const statusEl = document.getElementById('component-status');
try {
// 尝试访问组件库
if (window.VantComponents && window.VantComponents.MrButton) {
statusEl.className = 'status success';
statusEl.textContent = '✅ MrButton 组件加载成功！';
return true;
} else {
statusEl.className = 'status error';
statusEl.textContent = '❌ MrButton 组件未找到，可能加载失败';
return false;
}
} catch (error) {
statusEl.className = 'status error';
statusEl.textContent = '❌ 组件检测出错: ' + error.message;
return false;
}
}
// 测试变体
function testVariant(variant) {
const resultEl = document.getElementById('variant-result');
try {
if (window.VantComponents && window.VantComponents.MrButton) {
resultEl.innerHTML = `
<div style="color: #22c55e; margin-bottom: 8px;">
✅ 成功创建 ${variant} 变体按钮
</div>
<div style="font-size: 12px; color: #666;">
组件类型: MrButton<br>
变体: ${variant}<br>
状态: 可用
</div>
`;
} else {
resultEl.innerHTML = '<div style="color: #ef4444;">❌ 组件未加载，无法测试变体</div>';
}
} catch (error) {
resultEl.innerHTML = `<div style="color: #ef4444;">❌ 测试失败: ${error.message}</div>`;
}
}
// 测试字体大小
function testFontSize(fontSize) {
const resultEl = document.getElementById('font-result');
try {
if (window.VantComponents && window.VantComponents.MrButton) {
resultEl.innerHTML = `
<div style="color: #22c55e; margin-bottom: 8px;">
✅ 成功应用 ${fontSize} 字体大小
</div>
<div style="font-size: 12px; color: #666;">
字体级别: ${fontSize}<br>
对应尺寸: ${getFontSizeMapping(fontSize)}<br>
状态: 可用
</div>
`;
} else {
resultEl.innerHTML =
'<div style="color: #ef4444;">❌ 组件未加载，无法测试字体大小</div>';
}
} catch (error) {
resultEl.innerHTML = `<div style="color: #ef4444;">❌ 测试失败: ${error.message}</div>`;
}
}
// 测试金额样式
function testAmount(isAmount) {
const resultEl = document.getElementById('amount-result');
try {
if (window.VantComponents && window.VantComponents.MrButton) {
resultEl.innerHTML = `
<div style="color: #22c55e; margin-bottom: 8px;">
✅ 金额样式 ${isAmount ? '已启用' : '已禁用'}
</div>
<div style="font-size: 12px; color: #666;">
isAmount: ${isAmount}<br>
效果: ${isAmount ? '加粗金额文字' : '普通文字显示'}<br>
状态: 可用
</div>
`;
} else {
resultEl.innerHTML =
'<div style="color: #ef4444;">❌ 组件未加载，无法测试金额样式</div>';
}
} catch (error) {
resultEl.innerHTML = `<div style="color: #ef4444;">❌ 测试失败: ${error.message}</div>`;
}
}
// 字体大小映射
function getFontSizeMapping(fontSize) {
const mapping = {
h4: '16px',
h5: '14px',
h6: '13px',
h7: '12px',
};
return mapping[fontSize] || '未知';
}
// 页面加载完成后检查组件状态
window.addEventListener('load', function () {
setTimeout(checkComponentStatus, 1000);
});
// 定期检查组件状态
setInterval(checkComponentStatus, 5000);
</script>
</body>
</html>