mr-component
Version:
A library for Mr components
524 lines (459 loc) • 17.8 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>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
color: #333;
margin: 0 0 10px 0;
font-size: 28px;
font-weight: 600;
}
.header p {
color: #666;
margin: 0;
font-size: 16px;
}
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 12px;
border: 1px solid #e0e0e0;
}
.section h2 {
margin: 0 0 20px 0;
color: #333;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.section-payment {
border-left: 4px solid #ff9800;
}
.section-mobile {
border-left: 4px solid #2196f3;
}
.section-search {
border-left: 4px solid #4caf50;
}
.section-basic {
border-left: 4px solid #9c27b0;
}
.demo-row {
margin-bottom: 20px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
}
.demo-row h3 {
margin: 0 0 12px 0;
color: #555;
font-size: 14px;
font-weight: 500;
}
.demo-values {
margin-top: 12px;
padding: 8px 12px;
background: #e3f2fd;
border-radius: 6px;
border-left: 3px solid #2196f3;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
color: #1976d2;
}
.demo-values strong {
color: #0d47a1;
}
.mr-input {
margin-bottom: 16px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
margin: 0;
border-radius: 0;
min-height: 100vh;
box-sizing: border-box;
}
body {
padding: 0;
background: white;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📝 MrInput 组件测试</h1>
<p>支付场景专用输入框组件，包含金额输入、手机号输入、搜索输入等业务变体</p>
</div>
<!-- 支付金额输入测试 -->
<div class="section section-payment">
<h2>💰 支付金额输入 (payment-amount)</h2>
<div class="demo-row">
<h3>标准金额输入</h3>
<div id="payment-amount-basic"></div>
<div class="demo-values" id="payment-amount-basic-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
<div class="demo-row">
<h3>大号金额输入 (H4字体)</h3>
<div id="payment-amount-large"></div>
<div class="demo-values" id="payment-amount-large-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
<div class="demo-row">
<h3>美元金额输入</h3>
<div id="payment-amount-dollar"></div>
<div class="demo-values" id="payment-amount-dollar-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
</div>
<!-- 手机号输入测试 -->
<div class="section section-mobile">
<h2>📱 手机号输入 (mobile-number)</h2>
<div class="demo-row">
<h3>标准手机号输入</h3>
<div id="mobile-number-basic"></div>
<div class="demo-values" id="mobile-number-basic-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
<div class="demo-row">
<h3>带标签的手机号输入</h3>
<div id="mobile-number-labeled"></div>
<div class="demo-values" id="mobile-number-labeled-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
<div class="demo-row">
<h3>使用横线分隔符</h3>
<div id="mobile-number-dash"></div>
<div class="demo-values" id="mobile-number-dash-values">
<strong>原始值:</strong> '' | <strong>格式化值:</strong> ''
</div>
</div>
</div>
<!-- 搜索输入测试 -->
<div class="section section-search">
<h2>🔍 搜索输入 (search-input)</h2>
<div class="demo-row">
<h3>标准搜索输入</h3>
<div id="search-input-basic"></div>
<div class="demo-values" id="search-input-basic-values">
<strong>搜索值:</strong> '' | <strong>搜索结果:</strong> 未搜索
</div>
</div>
<div class="demo-row">
<h3>自定义搜索提示</h3>
<div id="search-input-custom"></div>
<div class="demo-values" id="search-input-custom-values">
<strong>搜索值:</strong> '' | <strong>搜索结果:</strong> 未搜索
</div>
</div>
</div>
<!-- 基础功能测试 -->
<div class="section section-basic">
<h2>⚙️ 基础功能测试</h2>
<div class="demo-row">
<h3>不同字体大小</h3>
<div id="basic-sizes"></div>
</div>
<div class="demo-row">
<h3>状态测试</h3>
<div id="basic-states"></div>
</div>
<div class="demo-row">
<h3>验证功能</h3>
<div id="basic-validation"></div>
</div>
</div>
</div>
<!-- React和相关依赖 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 引入构建后的组件库 -->
<script src="../lib/index.js"></script>
<!-- 样式文件 -->
<link rel="stylesheet" href="../lib/index.css" />
<script type="text/babel">
const { useState, useCallback } = React;
const { MrInput } = window.MrComponent;
// 支付金额输入演示
function PaymentAmountDemo() {
const [basicValue, setBasicValue] = useState('');
const [basicFormatted, setBasicFormatted] = useState('');
const [largeValue, setLargeValue] = useState('');
const [largeFormatted, setLargeFormatted] = useState('');
const [dollarValue, setDollarValue] = useState('');
const [dollarFormatted, setDollarFormatted] = useState('');
return (
<>
{/* 标准金额输入 */}
<MrInput
variant="payment-amount"
placeholder="请输入金额"
fontSize="h5"
onChange={(raw, formatted) => {
setBasicValue(raw);
setBasicFormatted(formatted);
document.getElementById(
'payment-amount-basic-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
{/* 大号金额输入 */}
<MrInput
variant="payment-amount"
placeholder="请输入金额"
fontSize="h4"
onChange={(raw, formatted) => {
setLargeValue(raw);
setLargeFormatted(formatted);
document.getElementById(
'payment-amount-large-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
{/* 美元金额输入 */}
<MrInput
variant="payment-amount"
placeholder="请输入金额"
fontSize="h5"
currency="$"
onChange={(raw, formatted) => {
setDollarValue(raw);
setDollarFormatted(formatted);
document.getElementById(
'payment-amount-dollar-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
</>
);
}
// 手机号输入演示
function MobileNumberDemo() {
const [basicValue, setBasicValue] = useState('');
const [basicFormatted, setBasicFormatted] = useState('');
const [labeledValue, setLabeledValue] = useState('');
const [labeledFormatted, setLabeledFormatted] = useState('');
const [dashValue, setDashValue] = useState('');
const [dashFormatted, setDashFormatted] = useState('');
return (
<>
{/* 标准手机号输入 */}
<MrInput
variant="mobile-number"
placeholder="请输入手机号"
fontSize="h5"
onChange={(raw, formatted) => {
setBasicValue(raw);
setBasicFormatted(formatted);
document.getElementById(
'mobile-number-basic-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
{/* 带标签的手机号输入 */}
<MrInput
variant="mobile-number"
label="联系电话"
placeholder="请输入手机号"
fontSize="h5"
required
onChange={(raw, formatted) => {
setLabeledValue(raw);
setLabeledFormatted(formatted);
document.getElementById(
'mobile-number-labeled-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
{/* 使用横线分隔符 */}
<MrInput
variant="mobile-number"
placeholder="请输入手机号"
fontSize="h5"
mobileSeparator="-"
onChange={(raw, formatted) => {
setDashValue(raw);
setDashFormatted(formatted);
document.getElementById(
'mobile-number-dash-values',
).innerHTML = `<strong>原始值:</strong> '${raw}' | <strong>格式化值:</strong> '${formatted}'`;
}}
/>
</>
);
}
// 搜索输入演示
function SearchInputDemo() {
const [basicValue, setBasicValue] = useState('');
const [basicResult, setBasicResult] = useState('未搜索');
const [customValue, setCustomValue] = useState('');
const [customResult, setCustomResult] = useState('未搜索');
return (
<>
{/* 标准搜索输入 */}
<MrInput
variant="search-input"
fontSize="h5"
onChange={(value) => {
setBasicValue(value);
document.getElementById(
'search-input-basic-values',
).innerHTML = `<strong>搜索值:</strong> '${value}' | <strong>搜索结果:</strong> ${basicResult}`;
}}
onSearch={(value) => {
const result = `搜索"${value}"的结果`;
setBasicResult(result);
document.getElementById(
'search-input-basic-values',
).innerHTML = `<strong>搜索值:</strong> '${value}' | <strong>搜索结果:</strong> ${result}`;
}}
/>
{/* 自定义搜索提示 */}
<MrInput
variant="search-input"
searchPlaceholder="搜索商品、店铺、品牌"
fontSize="h5"
onChange={(value) => {
setCustomValue(value);
document.getElementById(
'search-input-custom-values',
).innerHTML = `<strong>搜索值:</strong> '${value}' | <strong>搜索结果:</strong> ${customResult}`;
}}
onSearch={(value) => {
const result = `找到关于"${value}"的商品`;
setCustomResult(result);
document.getElementById(
'search-input-custom-values',
).innerHTML = `<strong>搜索值:</strong> '${value}' | <strong>搜索结果:</strong> ${result}`;
}}
/>
</>
);
}
// 基础功能演示
function BasicFeaturesDemo() {
return (
<>
{/* 不同字体大小 */}
<div style={{ marginBottom: '20px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>
H4 大号输入框
</h4>
<MrInput fontSize="h4" placeholder="H4 字体大小" />
</div>
<div style={{ marginBottom: '20px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>
H5 标准输入框
</h4>
<MrInput fontSize="h5" placeholder="H5 字体大小" />
</div>
<div style={{ marginBottom: '20px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>
H6 小号输入框
</h4>
<MrInput fontSize="h6" placeholder="H6 字体大小" />
</div>
<div style={{ marginBottom: '20px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>
H7 迷你输入框
</h4>
<MrInput fontSize="h7" placeholder="H7 字体大小" />
</div>
</>
);
}
// 状态测试演示
function StateTestDemo() {
return (
<>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>正常状态</h4>
<MrInput placeholder="正常状态" />
</div>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>禁用状态</h4>
<MrInput placeholder="禁用状态" disabled value="已禁用的输入框" />
</div>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>只读状态</h4>
<MrInput placeholder="只读状态" readOnly value="只读的输入框内容" />
</div>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>错误状态</h4>
<MrInput placeholder="错误状态" error errorMessage="输入格式不正确" />
</div>
</>
);
}
// 验证功能演示
function ValidationDemo() {
return (
<>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>必填字段</h4>
<MrInput label="用户名" placeholder="请输入用户名" required />
</div>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>字数限制</h4>
<MrInput placeholder="最多输入20个字符" maxLength={20} showWordLimit />
</div>
<div style={{ marginBottom: '16px' }}>
<h4 style={{ margin: '0 0 8px 0', color: '#666', fontSize: '12px' }}>可清除</h4>
<MrInput
placeholder="支持一键清除内容"
clearable
defaultValue="可以清除的内容"
/>
</div>
</>
);
}
// 渲染所有演示
ReactDOM.render(<PaymentAmountDemo />, document.getElementById('payment-amount-basic'));
ReactDOM.render(<PaymentAmountDemo />, document.getElementById('payment-amount-large'));
ReactDOM.render(<PaymentAmountDemo />, document.getElementById('payment-amount-dollar'));
ReactDOM.render(<MobileNumberDemo />, document.getElementById('mobile-number-basic'));
ReactDOM.render(<MobileNumberDemo />, document.getElementById('mobile-number-labeled'));
ReactDOM.render(<MobileNumberDemo />, document.getElementById('mobile-number-dash'));
ReactDOM.render(<SearchInputDemo />, document.getElementById('search-input-basic'));
ReactDOM.render(<SearchInputDemo />, document.getElementById('search-input-custom'));
ReactDOM.render(<BasicFeaturesDemo />, document.getElementById('basic-sizes'));
ReactDOM.render(<StateTestDemo />, document.getElementById('basic-states'));
ReactDOM.render(<ValidationDemo />, document.getElementById('basic-validation'));
</script>
</body>
</html>