mr-component
Version:
A library for Mr components
292 lines (277 loc) • 11 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>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 加载组件库的CSS -->
<link rel="stylesheet" href="../build/index.css" />
<style>
.demo-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.demo-section {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fafafa;
}
.demo-section h3 {
margin-top: 0;
color: #333;
}
.demo-item {
margin-bottom: 20px;
padding: 15px;
background: white;
border-radius: 4px;
border: 1px solid #eee;
}
.demo-item h4 {
margin: 0 0 10px 0;
color: #666;
font-size: 14px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.result-box {
margin-top: 10px;
padding: 10px;
background: #f5f5f5;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
// 导入组件 - 从全局变量中获取
const { MrInput } = window.VantComponents || {};
// 如果没有从全局变量获取到，尝试从build目录获取
if (!MrInput) {
console.error('MrInput 组件未找到');
}
function InputFixDemo() {
const [values, setValues] = useState({
default: '',
paymentAmount: '',
mobileNumber: '',
searchInput: '',
});
const handleChange = (key) => (value, formattedValue) => {
setValues((prev) => ({
...prev,
[key]: formattedValue || value,
}));
console.log(`${key}:`, { value, formattedValue });
};
return (
<div className="demo-container">
<h1>🎉 MrInput 终极样式修复测试</h1>
<p>
<strong>现在使用超强CSS覆盖！</strong>
测试MrInput组件在默认状态下是否正确显示样式（边框、圆角、高度、颜色等）
</p>
<div style="padding: 10px; background: #e8f5e9; border-radius: 4px; margin: 10px 0;">
<strong>✅ 期待效果：</strong>应该看到明显的
<span style="color: #FFA726;">橙色边框</span>和
<span style="background: #FFF3E0; padding: 2px 4px;">浅橙色背景</span>，以及
<span style="color: #E65100; font-weight: 600;">深橙色文字</span>
</div>
<div className="demo-section">
<h3>1. 默认样式测试（应该显示为payment-amount样式）</h3>
<div className="demo-item">
<h4>默认输入框（未指定variant）</h4>
<div className="input-group">
<MrInput
placeholder="默认输入框测试"
value={values.default}
onChange={handleChange('default')}
/>
<div className="result-box">当前值: {values.default || '(空)'}</div>
</div>
</div>
</div>
<div className="demo-section">
<h3>2. 支付金额输入（payment-amount）</h3>
<div className="demo-item">
<h4>橙色主题 + 货币符号 + 千分位分隔符</h4>
<div className="input-group">
<MrInput
variant="payment-amount"
placeholder="请输入金额"
value={values.paymentAmount}
onChange={handleChange('paymentAmount')}
currency="¥"
showThousandSeparator={true}
decimalPlaces={2}
/>
<div className="result-box">格式化值: {values.paymentAmount || '(空)'}</div>
</div>
</div>
</div>
<div className="demo-section">
<h3>3. 手机号输入（mobile-number）</h3>
<div className="demo-item">
<h4>蓝色主题 + 等宽字体 + 自动分隔</h4>
<div className="input-group">
<MrInput
variant="mobile-number"
placeholder="请输入手机号"
value={values.mobileNumber}
onChange={handleChange('mobileNumber')}
mobileSeparator=" "
/>
<div className="result-box">格式化值: {values.mobileNumber || '(空)'}</div>
</div>
</div>
</div>
<div className="demo-section">
<h3>4. 搜索输入（search-input）</h3>
<div className="demo-item">
<h4>绿色主题 + 搜索图标 + 圆角边框</h4>
<div className="input-group">
<MrInput
variant="search-input"
placeholder="请输入搜索内容"
value={values.searchInput}
onChange={handleChange('searchInput')}
onSearch={(value) => alert(`搜索: ${value}`)}
/>
<div className="result-box">搜索值: {values.searchInput || '(空)'}</div>
</div>
</div>
</div>
<div className="demo-section">
<h3>5. 字体大小变体测试</h3>
<div className="demo-item">
<h4>不同字体大小的输入框</h4>
<div className="input-group">
<MrInput
variant="payment-amount"
fontSize="h4"
placeholder="H4 大号输入框"
style={{ marginBottom: '10px' }}
/>
<MrInput
variant="mobile-number"
fontSize="h5"
placeholder="H5 中号输入框"
style={{ marginBottom: '10px' }}
/>
<MrInput
variant="search-input"
fontSize="h6"
placeholder="H6 小号输入框"
style={{ marginBottom: '10px' }}
/>
<MrInput
variant="payment-amount"
fontSize="h7"
placeholder="H7 最小输入框"
/>
</div>
</div>
</div>
<div className="demo-section">
<h3>6. 🚀 超强修复验证重点</h3>
<div className="demo-item">
<h4>🎯 终极修复后应该看到的效果：</h4>
<ul>
<li>
✅ <strong>明显的2px橙色边框</strong>（#FFA726）- 不再是默认灰色！
</li>
<li>
✅ <strong>浅橙色背景</strong>（#FFF3E0）- 有明显的主题色！
</li>
<li>
✅ <strong>深橙色文字</strong>（#E65100）- 字体颜色突出！
</li>
<li>
✅ <strong>8px圆角边框</strong> - 现代化UI设计！
</li>
<li>
✅ <strong>48px标准高度</strong> - 舒适的点击区域！
</li>
<li>
✅ <strong>12px内间距</strong> - 平衡的视觉效果！
</li>
<li>
✅ <strong>600字体粗细</strong> - 清晰易读！
</li>
<li>
✅ <strong>货币符号¥正确显示</strong> - 业务功能完整！
</li>
<li>
✅ <strong>聚焦时高亮效果</strong> - 交互反馈完美！
</li>
<li>
✅ <strong>移动端响应式</strong> - 全平台适配！
</li>
</ul>
<div style="margin-top: 15px; padding: 10px; background: #fff3e0; border-left: 4px solid #ffa726; border-radius: 4px;">
<strong>🔥 核心突破：</strong>
使用多重CSS选择器和!important强制覆盖，确保在低代码平台的复杂DOM结构中也能完美应用样式！
</div>
</div>
</div>
</div>
);
}
// 确保组件已加载后再渲染
if (MrInput) {
ReactDOM.render(<InputFixDemo />, document.getElementById('root'));
} else {
// 等待组件加载
setTimeout(() => {
const { MrInput: DelayedMrInput } = window.VantComponents || {};
if (DelayedMrInput) {
ReactDOM.render(<InputFixDemo />, document.getElementById('root'));
} else {
document.getElementById('root').innerHTML = `
<div style="padding: 20px; text-align: center;">
<h2>组件加载失败</h2>
<p>请确保已经构建了组件库：npm run build</p>
<p>当前尝试加载的组件: MrInput</p>
<p>可用的组件: ${
Object.keys(window.VantComponents || {}).join(', ') || '无'
}</p>
</div>
`;
}
}, 1000);
}
</script>
<!-- 尝试加载构建后的组件 -->
<script>
// 创建script标签加载组件
const script = document.createElement('script');
script.src = '../build/VantComponents.js';
script.onload = () => {
console.log('VantComponents loaded:', window.VantComponents);
// 重新渲染页面
if (window.VantComponents && window.VantComponents.MrInput) {
const { MrInput } = window.VantComponents;
ReactDOM.render(<InputFixDemo />, document.getElementById('root'));
}
};
script.onerror = () => {
console.error('Failed to load VantComponents.js');
};
document.head.appendChild(script);
</script>
</body>
</html>