mr-component
Version:
A library for Mr components
312 lines (268 loc) • 9.43 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MrInput onChange 修复验证</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: #f8f9fa;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.test-group {
margin-bottom: 30px;
padding: 25px;
border: 2px solid #e9ecef;
border-radius: 8px;
background: #f8f9fa;
}
.test-group h3 {
margin: 0 0 15px 0;
color: #495057;
font-size: 16px;
font-weight: 600;
}
.input-wrapper {
margin-bottom: 15px;
}
.input-wrapper label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #6c757d;
font-size: 14px;
}
.result {
margin-top: 10px;
padding: 10px 15px;
background: #d1ecf1;
border-left: 4px solid #17a2b8;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 13px;
color: #0c5460;
}
.status {
text-align: center;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
}
.status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.events-log {
max-height: 200px;
overflow-y: auto;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
font-family: monospace;
font-size: 12px;
}
.event-item {
padding: 4px 0;
border-bottom: 1px solid #e9ecef;
}
.event-time {
color: #6c757d;
margin-right: 10px;
}
.event-action {
color: #007bff;
font-weight: 600;
}
.event-value {
color: #28a745;
}
</style>
</head>
<body>
<div class="container">
<h1>🔧 MrInput onChange 事件修复验证</h1>
<div id="status-display"></div>
<div id="app"></div>
</div>
<script type="text/babel">
const { useState, useEffect } = React;
function showStatus(message, type = 'success') {
const statusEl = document.getElementById('status-display');
statusEl.innerHTML = `<div class="status ${type}">${message}</div>`;
}
function OnChangeTestApp() {
const [inputValues, setInputValues] = useState({
text: '',
number: '',
password: '',
email: '',
});
const [events, setEvents] = useState([]);
// 检查组件加载状态
useEffect(() => {
if (typeof VantComponents === 'undefined' || !VantComponents.MrInput) {
showStatus('❌ 错误：MrInput 组件未正确加载！请检查构建文件。', 'error');
return;
}
showStatus('✅ 成功：MrInput 组件已加载，开始测试 onChange 事件...', 'success');
}, []);
// 记录事件
const logEvent = (type, field, value) => {
const timestamp = new Date().toLocaleTimeString();
const newEvent = {
id: Date.now(),
timestamp,
type,
field,
value: String(value),
};
setEvents((prev) => [newEvent, ...prev.slice(0, 19)]); // 保留最近20条
};
// 处理输入变化
const handleInputChange = (field) => (value) => {
console.log(`🔥 onChange 触发！字段: ${field}, 值: "${value}"`);
// 更新输入值
setInputValues((prev) => ({
...prev,
[field]: value,
}));
// 记录事件
logEvent('onChange', field, value);
// 更新状态显示
showStatus(`✅ onChange 事件成功触发！字段: ${field}, 值: "${value}"`, 'success');
};
if (typeof VantComponents === 'undefined' || !VantComponents.MrInput) {
return (
<div className="status error">
❌ 错误：VantComponents.MrInput 组件未找到！
<br />
请确保 lowcode 构建文件正确加载。
</div>
);
}
const { MrInput } = VantComponents;
return (
<div>
<div className="test-group">
<h3>📝 基础输入测试</h3>
<div className="input-wrapper">
<label>文本输入框（type="text"）:</label>
<MrInput
type="text"
placeholder="请输入文本，测试onChange事件"
value={inputValues.text}
onChange={handleInputChange('text')}
/>
<div className="result">当前值: "{inputValues.text}"</div>
</div>
<div className="input-wrapper">
<label>数字输入框（type="number"）:</label>
<MrInput
type="number"
placeholder="请输入数字，测试onChange事件"
value={inputValues.number}
onChange={handleInputChange('number')}
/>
<div className="result">当前值: "{inputValues.number}"</div>
</div>
</div>
<div className="test-group">
<h3>🔐 特殊类型测试</h3>
<div className="input-wrapper">
<label>密码输入框（type="password"）:</label>
<MrInput
type="password"
placeholder="请输入密码，测试onChange事件"
value={inputValues.password}
onChange={handleInputChange('password')}
/>
<div className="result">当前值: "{inputValues.password}"</div>
</div>
<div className="input-wrapper">
<label>邮箱输入框（type="email"）:</label>
<MrInput
type="email"
placeholder="请输入邮箱，测试onChange事件"
value={inputValues.email}
onChange={handleInputChange('email')}
/>
<div className="result">当前值: "{inputValues.email}"</div>
</div>
</div>
<div className="test-group">
<h3>🎨 主题样式测试</h3>
<div className="input-wrapper">
<label>主色蓝色主题（theme="primary"）:</label>
<MrInput
type="text"
theme="primary"
placeholder="蓝色主题，测试onChange事件"
onChange={(value) => {
console.log('主色主题输入:', value);
logEvent('onChange', 'primary-theme', value);
}}
/>
</div>
<div className="input-wrapper">
<label>警告橙色主题（theme="warning"）:</label>
<MrInput
type="text"
theme="warning"
placeholder="橙色主题，测试onChange事件"
onChange={(value) => {
console.log('警告主题输入:', value);
logEvent('onChange', 'warning-theme', value);
}}
/>
</div>
</div>
{events.length > 0 && (
<div className="test-group">
<h3>📊 事件记录（最近20条）</h3>
<div className="events-log">
{events.map((event) => (
<div key={event.id} className="event-item">
<span className="event-time">{event.timestamp}</span>
<span className="event-action">{event.type}</span>
<span> → </span>
<span className="event-field">{event.field}</span>
<span> = </span>
<span className="event-value">"{event.value}"</span>
</div>
))}
</div>
</div>
)}
</div>
);
}
// 渲染应用
ReactDOM.render(<OnChangeTestApp />, document.getElementById('app'));
</script>
</body>
</html>