mr-component
Version:
A library for Mr components
185 lines (164 loc) • 6.25 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单输入测试</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: #f5f5f5;
}
.container {
max-width: 375px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.test-case {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
}
.test-title {
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.result {
margin-top: 10px;
padding: 8px;
background: #f0f0f0;
border-radius: 4px;
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
function App() {
const [inputValue, setInputValue] = useState('');
const [mrinputValue, setMrinputValue] = useState('');
console.log('VantComponents available:', typeof VantComponents !== 'undefined');
console.log('VantComponents object:', VantComponents);
// 检查组件是否可用
if (typeof VantComponents === 'undefined') {
return React.createElement(
'div',
{ className: 'container' },
React.createElement('h1', { style: { color: 'red' } }, '❌ VantComponents 未加载'),
React.createElement('p', null, '请检查lowcode构建文件是否正确加载'),
);
}
const { Input: VantInput, MrInput } = VantComponents;
return React.createElement(
'div',
{ className: 'container' },
React.createElement('h1', null, '🧪 输入组件测试'),
// 测试1: 原生HTML input
React.createElement(
'div',
{ className: 'test-case' },
React.createElement('div', { className: 'test-title' }, '1. 原生HTML Input'),
React.createElement('input', {
type: 'text',
placeholder: '请输入内容',
value: inputValue,
onChange: (e) => setInputValue(e.target.value),
style: {
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '14px',
},
}),
React.createElement('div', { className: 'result' }, `输入值: "${inputValue}"`),
),
// 测试2: Vant Input（如果存在）
VantInput &&
React.createElement(
'div',
{ className: 'test-case' },
React.createElement('div', { className: 'test-title' }, '2. Vant Input'),
React.createElement(VantInput, {
placeholder: '请输入内容',
onChange: (value) => {
console.log('Vant Input onChange:', value);
setInputValue(value);
},
style: { width: '100%' },
}),
React.createElement('div', { className: 'result' }, `Vant输入值: "${inputValue}"`),
),
// 测试3: MrInput
MrInput &&
React.createElement(
'div',
{ className: 'test-case' },
React.createElement('div', { className: 'test-title' }, '3. MrInput'),
React.createElement(MrInput, {
placeholder: '请输入内容',
value: mrinputValue,
onChange: (value) => {
console.log('MrInput onChange:', value);
setMrinputValue(value);
},
style: { width: '100%' },
}),
React.createElement('div', { className: 'result' }, `MrInput值: "${mrinputValue}"`),
),
// 测试4: MrInput简化版
MrInput &&
React.createElement(
'div',
{ className: 'test-case' },
React.createElement('div', { className: 'test-title' }, '4. MrInput (无样式)'),
React.createElement(MrInput, {
placeholder: '简单输入框',
type: 'text',
onChange: (value) => {
console.log('Simple MrInput onChange:', value);
},
}),
React.createElement('div', { className: 'result' }, '检查控制台日志'),
),
// 调试信息
React.createElement(
'div',
{ className: 'test-case' },
React.createElement('div', { className: 'test-title' }, '🔍 调试信息'),
React.createElement(
'div',
{ className: 'result' },
React.createElement('div', null, `VantComponents类型: ${typeof VantComponents}`),
React.createElement(
'div',
null,
`可用组件: ${VantComponents ? Object.keys(VantComponents).join(', ') : '无'}`,
),
React.createElement('div', null, `MrInput存在: ${MrInput ? '✅' : '❌'}`),
React.createElement('div', null, `VantInput存在: ${VantInput ? '✅' : '❌'}`),
),
),
);
}
ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>
</body>
</html>