mr-component
Version:
A library for Mr components
266 lines (232 loc) • 8.29 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 -->
<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: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.test-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e6e6e6;
border-radius: 8px;
background: #fafafa;
}
.test-title {
margin: 0 0 15px 0;
color: #333;
font-size: 18px;
font-weight: 600;
}
.test-input {
margin-bottom: 15px;
}
.test-input label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #666;
}
.result-display {
margin-top: 10px;
padding: 10px;
background: #e8f5e9;
border-radius: 4px;
border-left: 4px solid #4caf50;
font-family: monospace;
font-size: 14px;
}
.error-display {
margin-top: 10px;
padding: 10px;
background: #ffebee;
border-radius: 4px;
border-left: 4px solid #f44336;
color: #c62828;
}
.status {
text-align: center;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
}
.status.success {
background: #e8f5e9;
color: #2e7d32;
border: 1px solid #c8e6c9;
}
.status.error {
background: #ffebee;
color: #c62828;
border: 1px solid #ffcdd2;
}
</style>
</head>
<body>
<div class="container">
<h1>🛠️ MrInput 输入功能修复测试</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 InputTestApp() {
const [inputValues, setInputValues] = useState({
text: '',
number: '',
password: '',
email: '',
});
const [changeEvents, setChangeEvents] = useState([]);
useEffect(() => {
// 检查组件是否正确加载
if (typeof VantComponents === 'undefined' || !VantComponents.MrInput) {
showStatus('❌ MrInput 组件未正确加载！请检查构建文件。', 'error');
return;
}
showStatus('✅ MrInput 组件加载成功！开始测试输入功能...', 'success');
}, []);
const handleInputChange = (field) => (value) => {
console.log(`${field} 输入变化:`, value);
// 更新输入值
setInputValues((prev) => ({
...prev,
[field]: value,
}));
// 记录变化事件
const timestamp = new Date().toLocaleTimeString();
setChangeEvents((prev) => [
...prev.slice(-4), // 只保留最近5个事件
{ field, value, timestamp },
]);
showStatus(`✅ ${field} 输入成功！值: "${value}"`, 'success');
};
if (typeof VantComponents === 'undefined' || !VantComponents.MrInput) {
return (
<div className="error-display">
❌ 错误：MrInput 组件未找到！
<br />
请确保 lowcode 构建文件正确加载。
</div>
);
}
const { MrInput } = VantComponents;
return (
<div>
<div className="test-section">
<h2 className="test-title">1. 文本输入测试</h2>
<div className="test-input">
<label>普通文本输入框（type="text"）:</label>
<MrInput
type="text"
placeholder="请输入文本内容"
value={inputValues.text}
onChange={handleInputChange('text')}
/>
<div className="result-display">当前值: "{inputValues.text}"</div>
</div>
</div>
<div className="test-section">
<h2 className="test-title">2. 数字输入测试</h2>
<div className="test-input">
<label>数字输入框（type="number"）:</label>
<MrInput
type="number"
placeholder="请输入数字"
value={inputValues.number}
onChange={handleInputChange('number')}
/>
<div className="result-display">当前值: "{inputValues.number}"</div>
</div>
</div>
<div className="test-section">
<h2 className="test-title">3. 密码输入测试</h2>
<div className="test-input">
<label>密码输入框（type="password"）:</label>
<MrInput
type="password"
placeholder="请输入密码"
value={inputValues.password}
onChange={handleInputChange('password')}
/>
<div className="result-display">当前值: "{inputValues.password}"</div>
</div>
</div>
<div className="test-section">
<h2 className="test-title">4. 邮箱输入测试</h2>
<div className="test-input">
<label>邮箱输入框（type="email"）:</label>
<MrInput
type="email"
placeholder="请输入邮箱地址"
value={inputValues.email}
onChange={handleInputChange('email')}
/>
<div className="result-display">当前值: "{inputValues.email}"</div>
</div>
</div>
<div className="test-section">
<h2 className="test-title">5. 主题样式测试</h2>
<div className="test-input">
<label>主色蓝色主题:</label>
<MrInput
type="text"
theme="primary"
placeholder="主色蓝色主题"
onChange={(value) => console.log('主题测试:', value)}
/>
</div>
<div className="test-input">
<label>警告橙色主题:</label>
<MrInput
type="text"
theme="warning"
placeholder="警告橙色主题"
onChange={(value) => console.log('主题测试:', value)}
/>
</div>
</div>
{changeEvents.length > 0 && (
<div className="test-section">
<h2 className="test-title">6. 最近输入事件记录</h2>
{changeEvents.map((event, index) => (
<div key={index} className="result-display" style={{ marginBottom: '5px' }}>
<strong>{event.timestamp}</strong> - {event.field}: "{event.value}"
</div>
))}
</div>
)}
</div>
);
}
// 渲染应用
ReactDOM.render(<InputTestApp />, document.getElementById('app'));
</script>
</body>
</html>