mr-component
Version:
A library for Mr components
101 lines (88 loc) • 3.38 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>简单测试 VantComponents</title>
<style>
body {
padding: 20px;
font-family: Arial, sans-serif;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.success {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.error {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
</style>
</head>
<body>
<h2>🔍 VantComponents 调试测试</h2>
<div id="test-results"></div>
<!-- 低代码构建文件 -->
<script src="../build/lowcode/view.js"></script>
<script>
const results = document.getElementById('test-results');
function addResult(message, isError = false) {
const div = document.createElement('div');
div.className = `status ${isError ? 'error' : 'success'}`;
div.textContent = message;
results.appendChild(div);
}
// 测试 VantComponents 是否存在
console.log('🔍 检查 VantComponents:', typeof window.VantComponents);
console.log('🔍 window.VantComponents:', window.VantComponents);
if (typeof window.VantComponents === 'undefined') {
addResult('❌ VantComponents 未定义', true);
// 检查所有可能的全局变量
const possibleNames = ['VantComponents', 'vantComponents', 'MrComponents', 'components'];
possibleNames.forEach((name) => {
if (window[name]) {
addResult(`✅ 找到全局变量: ${name}`, false);
console.log(`${name}:`, window[name]);
}
});
// 检查所有window对象的属性
console.log('🔍 所有window属性:');
Object.keys(window).forEach((key) => {
if (key.toLowerCase().includes('vant') || key.toLowerCase().includes('component')) {
console.log(`- ${key}:`, window[key]);
addResult(`🔍 相关属性: ${key}`, false);
}
});
} else {
addResult('✅ VantComponents 已正确加载', false);
// 检查 MrPaymentPopup 是否存在
if (window.VantComponents.MrPaymentPopup) {
addResult('✅ MrPaymentPopup 组件存在', false);
console.log('🧩 MrPaymentPopup:', window.VantComponents.MrPaymentPopup);
} else {
addResult('❌ MrPaymentPopup 组件不存在', true);
// 列出所有可用组件
const components = Object.keys(window.VantComponents);
addResult(`📋 可用组件 (${components.length}个): ${components.join(', ')}`, false);
console.log('📋 所有可用组件:', components);
console.log('📋 VantComponents 完整内容:', window.VantComponents);
}
}
// 检查script标签是否正确加载
const scripts = document.querySelectorAll('script[src]');
scripts.forEach((script, index) => {
if (script.src.includes('view.js')) {
addResult(`✅ view.js 脚本已加载: ${script.src}`, false);
script.onload = () => addResult('✅ view.js onload 事件触发', false);
script.onerror = () => addResult('❌ view.js 加载错误', true);
}
});
</script>
</body>
</html>