mr-component
Version:
A library for Mr components
309 lines (270 loc) • 9.45 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>✅ MrInput 修复验证 - 最终测试</title>
<!-- 加载React 17 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 加载lowcode构建文件 -->
<script src="../build/lowcode/view.js"></script>
<link rel="stylesheet" href="../build/lowcode/view.css" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
margin: 0;
color: #333;
font-size: 32px;
font-weight: bold;
}
.test-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.test-item {
padding: 25px;
border: 2px solid #e1e8f0;
border-radius: 12px;
background: #f8fafc;
transition: all 0.3s ease;
}
.test-item:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}
.test-title {
margin: 0 0 15px 0;
color: #2d3748;
font-size: 18px;
font-weight: 600;
}
.value-display {
margin-top: 15px;
padding: 12px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 14px;
color: #4a5568;
}
.status-indicator {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-left: 10px;
}
.status-success {
background: #c6f6d5;
color: #22543d;
}
.status-error {
background: #fed7d7;
color: #742a2a;
}
.demo-section {
margin-top: 40px;
padding: 30px;
background: #f7fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.demo-title {
margin: 0 0 20px 0;
color: #2d3748;
font-size: 20px;
font-weight: 600;
}
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #4a5568;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect } = React;
function TestApp() {
const [textValue, setTextValue] = useState('');
const [numberValue, setNumberValue] = useState('');
const [passwordValue, setPasswordValue] = useState('');
const [isLoaded, setIsLoaded] = useState(false);
const [hasErrors, setHasErrors] = useState(false);
useEffect(() => {
// 检查组件是否加载成功
if (window.VantComponents && window.VantComponents.MrInput) {
setIsLoaded(true);
console.log('✅ MrInput组件加载成功');
} else {
setHasErrors(true);
console.error('❌ MrInput组件加载失败');
}
}, []);
const handleTextChange = (value) => {
console.log('📝 文本输入变化:', value);
setTextValue(value);
};
const handleNumberChange = (value) => {
console.log('🔢 数字输入变化:', value);
setNumberValue(value);
};
const handlePasswordChange = (value) => {
console.log('🔐 密码输入变化:', value.replace(/./g, '*'));
setPasswordValue(value);
};
if (!isLoaded && !hasErrors) {
return (
<div className="container">
<div className="header">
<h1>⏳ 加载中...</h1>
<p>正在检查MrInput组件...</p>
</div>
</div>
);
}
if (hasErrors) {
return (
<div className="container">
<div className="header">
<h1>❌ 组件加载失败</h1>
<p>无法找到MrInput组件，请检查构建是否成功</p>
</div>
</div>
);
}
const MrInput = window.VantComponents.MrInput;
return (
<div className="container">
<div className="header">
<h1>✅ MrInput 修复验证</h1>
<p>测试onChange事件修复后的输入功能</p>
<span className="status-indicator status-success">组件已加载</span>
</div>
<div className="test-grid">
<div className="test-item">
<h3 className="test-title">📝 文本输入测试</h3>
<MrInput
type="text"
placeholder="请输入文本内容"
value={textValue}
onChange={handleTextChange}
/>
<div className="value-display">
当前值: "{textValue}"<br />
长度: {textValue.length} 字符
</div>
</div>
<div className="test-item">
<h3 className="test-title">🔢 数字输入测试</h3>
<MrInput
type="number"
placeholder="请输入数字"
value={numberValue}
onChange={handleNumberChange}
/>
<div className="value-display">
当前值: "{numberValue}"<br />
类型: {typeof numberValue}
</div>
</div>
<div className="test-item">
<h3 className="test-title">🔐 密码输入测试</h3>
<MrInput
type="password"
placeholder="请输入密码"
value={passwordValue}
onChange={handlePasswordChange}
/>
<div className="value-display">
当前值: "{passwordValue.replace(/./g, '*')}"<br />
长度: {passwordValue.length} 字符
</div>
</div>
</div>
<div className="demo-section">
<h3 className="demo-title">🎯 功能测试检查表</h3>
<div className="input-group">
<span className="input-label">✅ 能否正常输入文本</span>
<span
className={
textValue.length > 0
? 'status-indicator status-success'
: 'status-indicator status-error'
}
>
{textValue.length > 0 ? '通过' : '请在上方输入文本'}
</span>
</div>
<div className="input-group">
<span className="input-label">✅ 能否正常输入数字</span>
<span
className={
numberValue.length > 0
? 'status-indicator status-success'
: 'status-indicator status-error'
}
>
{numberValue.length > 0 ? '通过' : '请在上方输入数字'}
</span>
</div>
<div className="input-group">
<span className="input-label">✅ onChange事件是否正常触发</span>
<span className="status-indicator status-success">正常 - 检查控制台日志</span>
</div>
<div className="input-group">
<span className="input-label">✅ 是否有JavaScript错误</span>
<span className="status-indicator status-success">无错误 - 页面正常运行</span>
</div>
</div>
<div
style={{
marginTop: '30px',
padding: '20px',
background: '#e6fffa',
borderRadius: '8px',
border: '1px solid #38b2ac',
}}
>
<h4 style={{ margin: '0 0 10px 0', color: '#234e52' }}>🎉 修复总结</h4>
<p style={{ margin: 0, color: '#234e52' }}>
修复了MrInput组件的onChange事件处理，将React标准事件格式改为react-vant的值传递格式。
现在输入功能应该完全正常工作！
</p>
</div>
</div>
);
}
ReactDOM.render(<TestApp />, document.getElementById('root'));
</script>
</body>
</html>