mr-component
Version:
A library for Mr components
358 lines (325 loc) • 11.1 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%);
min-height: 100vh;
}
.container {
max-width: 420px;
margin: 20px auto;
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.header {
text-align: center;
margin-bottom: 32px;
}
.title {
font-size: 28px;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 8px 0;
}
.subtitle {
color: #666;
font-size: 14px;
margin: 0;
}
.test-section {
margin-bottom: 24px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 8px;
}
.emoji {
font-size: 18px;
}
.input-wrapper {
margin-bottom: 12px;
}
.result-display {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px;
font-family: 'Courier New', monospace;
font-size: 14px;
color: #495057;
word-break: break-all;
}
.success {
background: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-left: 8px;
}
.badge-success {
background: #d4edda;
color: #155724;
}
.badge-working {
background: #fff3cd;
color: #856404;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
function App() {
const [textValue, setTextValue] = useState('');
const [numberValue, setNumberValue] = useState('');
const [passwordValue, setPasswordValue] = useState('');
console.log('🚀 页面加载，检查组件:', typeof VantComponents !== 'undefined');
if (typeof VantComponents === 'undefined') {
return React.createElement(
'div',
{ className: 'container' },
React.createElement(
'div',
{ className: 'header' },
React.createElement('h1', { className: 'title' }, '❌ 加载失败'),
React.createElement('p', { className: 'subtitle' }, 'VantComponents未正确加载'),
),
);
}
const { MrInput } = VantComponents;
if (!MrInput) {
return React.createElement(
'div',
{ className: 'container' },
React.createElement(
'div',
{ className: 'header' },
React.createElement('h1', { className: 'title' }, '❌ 组件缺失'),
React.createElement('p', { className: 'subtitle' }, '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);
};
return React.createElement(
'div',
{ className: 'container' },
// 标题区域
React.createElement(
'div',
{ className: 'header' },
React.createElement('h1', { className: 'title' }, 'MrInput 测试'),
React.createElement('p', { className: 'subtitle' }, 'onChange事件修复验证'),
),
// 测试1: 文本输入
React.createElement(
'div',
{ className: 'test-section' },
React.createElement(
'h3',
{ className: 'section-title' },
React.createElement('span', { className: 'emoji' }, '📝'),
'文本输入测试',
React.createElement(
'span',
{
className: `status-badge ${textValue ? 'badge-success' : 'badge-working'}`,
},
textValue ? '✅ 工作正常' : '⏳ 等待输入',
),
),
React.createElement(
'div',
{ className: 'input-wrapper' },
React.createElement(MrInput, {
type: 'text',
placeholder: '请输入任意文本...',
value: textValue,
onChange: handleTextChange,
style: { width: '100%' },
}),
),
React.createElement(
'div',
{
className: `result-display ${textValue ? 'success' : ''}`,
},
`输入内容: "${textValue}"`,
),
),
// 测试2: 数字输入
React.createElement(
'div',
{ className: 'test-section' },
React.createElement(
'h3',
{ className: 'section-title' },
React.createElement('span', { className: 'emoji' }, '🔢'),
'数字输入测试',
React.createElement(
'span',
{
className: `status-badge ${numberValue ? 'badge-success' : 'badge-working'}`,
},
numberValue ? '✅ 工作正常' : '⏳ 等待输入',
),
),
React.createElement(
'div',
{ className: 'input-wrapper' },
React.createElement(MrInput, {
type: 'number',
placeholder: '请输入数字...',
value: numberValue,
onChange: handleNumberChange,
style: { width: '100%' },
}),
),
React.createElement(
'div',
{
className: `result-display ${numberValue ? 'success' : ''}`,
},
`数字内容: "${numberValue}"`,
),
),
// 测试3: 密码输入
React.createElement(
'div',
{ className: 'test-section' },
React.createElement(
'h3',
{ className: 'section-title' },
React.createElement('span', { className: 'emoji' }, '🔒'),
'密码输入测试',
React.createElement(
'span',
{
className: `status-badge ${passwordValue ? 'badge-success' : 'badge-working'}`,
},
passwordValue ? '✅ 工作正常' : '⏳ 等待输入',
),
),
React.createElement(
'div',
{ className: 'input-wrapper' },
React.createElement(MrInput, {
type: 'password',
placeholder: '请输入密码...',
value: passwordValue,
onChange: handlePasswordChange,
style: { width: '100%' },
}),
),
React.createElement(
'div',
{
className: `result-display ${passwordValue ? 'success' : ''}`,
},
`密码长度: ${passwordValue.length} 字符`,
),
),
// 总结状态
React.createElement(
'div',
{
className: 'test-section',
style: {
background: textValue && numberValue && passwordValue ? '#d4edda' : '#fff3cd',
borderColor: textValue && numberValue && passwordValue ? '#c3e6cb' : '#ffeaa7',
},
},
React.createElement(
'h3',
{ className: 'section-title' },
React.createElement(
'span',
{ className: 'emoji' },
textValue && numberValue && passwordValue ? '🎉' : '⏳',
),
'测试状态总结',
),
React.createElement(
'div',
{ style: { fontSize: '14px', lineHeight: '1.6' } },
React.createElement(
'p',
{ style: { margin: '0 0 8px 0' } },
`✅ 文本输入: ${textValue ? '正常工作' : '待测试'}`,
),
React.createElement(
'p',
{ style: { margin: '0 0 8px 0' } },
`✅ 数字输入: ${numberValue ? '正常工作' : '待测试'}`,
),
React.createElement(
'p',
{ style: { margin: '0 0 12px 0' } },
`✅ 密码输入: ${passwordValue ? '正常工作' : '待测试'}`,
),
React.createElement(
'div',
{
style: {
fontWeight: 'bold',
color: textValue && numberValue && passwordValue ? '#155724' : '#856404',
},
},
textValue && numberValue && passwordValue
? '🎊 所有测试通过！MrInput输入功能已修复！'
: '⏳ 请在上方输入框中输入内容进行测试...',
),
),
),
);
}
ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>
</body>
</html>