mr-component
Version:
A library for Mr components
175 lines (156 loc) • 5.46 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MrSelect 正确使用方式</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
padding: 20px;
background: #f5f6fa;
margin: 0;
}
.demo-container {
max-width: 400px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.demo-item {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
}
.demo-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="demo-container">
<h1>MrSelect 使用演示</h1>
<div class="demo-item">
<div class="demo-title">❌ 错误用法：直接设置value属性</div>
<div id="wrong-usage"></div>
<p style="color: #666; font-size: 12px; margin-top: 10px">
这样设置value是无效的，因为MrSelect是弹窗选择器
</p>
</div>
<div class="demo-item">
<div class="demo-title">✅ 正确用法：Picker弹窗选择器</div>
<div id="correct-usage"></div>
<p style="color: #666; font-size: 12px; margin-top: 10px">点击会弹出选择器，选择后确认</p>
</div>
<div class="demo-item">
<div class="demo-title">📱 更适合手机应用的选择组件建议</div>
<div id="mobile-friendly"></div>
<p style="color: #666; font-size: 12px; margin-top: 10px">
对于支付应用，建议使用列表选择的方式
</p>
</div>
</div>
<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/react-vant@3/lib/index.js"></script>
<script src="../lib/index.js"></script>
<script>
const { MrSelect } = window.YourMaterialDemo;
const { Cell, Radio, RadioGroup } = window.ReactVant;
const { createElement: h, useState } = React;
const { createRoot } = ReactDOM;
const options = [
{ value: 'bank1', label: 'MuRong Bank (KES 13,093.40)' },
{ value: 'bank2', label: 'MuRong Bank (KES 2,500.00)' },
{ value: 'wallet', label: 'Wallet (KES 140,455.50)' },
];
// 错误用法演示
createRoot(document.getElementById('wrong-usage')).render(
h(MrSelect, {
title: '选择支付方式',
options: options,
value: ['bank1', 'bank2'], // ❌ 这样设置是无效的
theme: 'primary',
}),
);
// 正确用法演示
function CorrectUsage() {
const [selectedValue, setSelectedValue] = useState('');
const [selectedLabel, setSelectedLabel] = useState('请选择支付方式');
const handleConfirm = (values, options) => {
setSelectedValue(values);
setSelectedLabel(options ? options.label : '已选择');
console.log('选择的值:', values, options);
};
return h('div', {}, [
h(
'div',
{
key: 'display',
style: {
padding: '12px',
border: '1px solid #ddd',
borderRadius: '6px',
marginBottom: '10px',
backgroundColor: '#f9f9f9',
},
},
`当前选择: ${selectedLabel}`,
),
h(MrSelect, {
key: 'select',
title: '选择支付方式',
options: options,
onConfirm: handleConfirm,
theme: 'primary',
}),
]);
}
createRoot(document.getElementById('correct-usage')).render(h(CorrectUsage));
// 手机友好的选择组件建议
function MobileFriendlySelect() {
const [selectedValue, setSelectedValue] = useState('bank1');
return h(
'div',
{},
options.map((option, index) =>
h(
'div',
{
key: option.value,
style: {
display: 'flex',
alignItems: 'center',
padding: '12px',
border: '1px solid #e8e8e8',
borderRadius: '8px',
marginBottom: '8px',
backgroundColor: selectedValue === option.value ? '#f0f8ff' : '#fff',
cursor: 'pointer',
},
onClick: () => setSelectedValue(option.value),
},
[
h('input', {
key: 'radio',
type: 'radio',
checked: selectedValue === option.value,
onChange: () => setSelectedValue(option.value),
style: { marginRight: '10px' },
}),
h('span', { key: 'label' }, option.label),
],
),
),
);
}
createRoot(document.getElementById('mobile-friendly')).render(h(MobileFriendlySelect));
</script>
</body>
</html>