mr-component
Version:
A library for Mr components
491 lines (408 loc) • 13.3 kB
Markdown
---
title: Vant 移动端组件使用演示
order: 1
---
# Vant 移动端组件使用演示
本 Demo 演示所有 Vant 移动端组件的基础用法和进阶用法。
## VantButton 按钮组件
### 基础用法
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { VantButton } from 'mr-component';
function ButtonDemo() {
return (
<div style={{ padding: '20px' }}>
<h3>基础按钮</h3>
<VantButton text="默认按钮" />
<VantButton text="主要按钮" type="primary" />
<VantButton text="成功按钮" type="success" />
<VantButton text="警告按钮" type="warning" />
<VantButton text="危险按钮" type="danger" />
<h3>按钮尺寸</h3>
<VantButton text="大号按钮" size="large" type="primary" />
<VantButton text="普通按钮" size="normal" type="primary" />
<VantButton text="小号按钮" size="small" type="primary" />
<VantButton text="迷你按钮" size="mini" type="primary" />
<h3>按钮状态</h3>
<VantButton text="禁用状态" disabled />
<VantButton text="加载中" loading type="primary" />
<h3>按钮形状</h3>
<VantButton text="圆形按钮" round type="primary" />
<VantButton text="方形按钮" square type="primary" />
<VantButton text="块级按钮" block type="primary" />
</div>
);
}
ReactDOM.render(<ButtonDemo />, mountNode);
```
## VantInput 输入框组件
### 基础用法
```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { VantInput } from 'mr-component';
function InputDemo() {
const [values, setValues] = useState({
text: '',
password: '',
number: '',
});
const handleChange = (field) => (value) => {
setValues((prev) => ({ ...prev, [field]: value }));
};
return (
<div style={{ padding: '20px' }}>
<h3>基础输入框</h3>
<VantInput placeholder="请输入用户名" value={values.text} onChange={handleChange('text')} />
<h3>不同类型</h3>
<VantInput
type="password"
placeholder="请输入密码"
value={values.password}
onChange={handleChange('password')}
/>
<VantInput
type="number"
placeholder="请输入数字"
value={values.number}
onChange={handleChange('number')}
/>
<VantInput type="tel" placeholder="请输入手机号" />
<VantInput type="email" placeholder="请输入邮箱" />
<h3>带标签的输入框</h3>
<VantInput label="用户名" placeholder="请输入用户名" required />
<VantInput label="手机号" type="tel" placeholder="请输入手机号" clearable />
<h3>禁用状态</h3>
<VantInput placeholder="禁用状态" disabled value="不可编辑" />
</div>
);
}
ReactDOM.render(<InputDemo />, mountNode);
```
## VantCell 单元格组件
### 基础用法
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { VantCell } from 'mr-component';
function CellDemo() {
const handleCellClick = (title) => {
alert(`点击了：${title}`);
};
return (
<div style={{ padding: '20px' }}>
<h3>基础单元格</h3>
<VantCell title="单元格" value="内容" />
<VantCell title="单元格" value="内容" label="描述信息" />
<h3>展示图标</h3>
<VantCell title="单元格" value="内容" icon="location-o" />
<h3>只设置 value</h3>
<VantCell value="内容" />
<h3>链接 | 分组</h3>
<VantCell title="单元格" isLink />
<VantCell title="单元格" value="内容" isLink />
<VantCell title="单元格" value="跳转" isLink onClick={() => handleCellClick('跳转')} />
<h3>分组标题</h3>
<VantCell title="个人信息" />
<VantCell title="姓名" value="张三" />
<VantCell title="手机号" value="138****8888" />
<h3>使用插槽</h3>
<VantCell title="标题" value="内容" />
<VantCell title="标题" label="描述信息" />
<h3>垂直居中</h3>
<VantCell center title="单元格" value="内容" label="描述信息" />
</div>
);
}
ReactDOM.render(<CellDemo />, mountNode);
```
## VantTag 标签组件
### 基础用法
```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { VantTag } from 'mr-component';
function TagDemo() {
const [tags, setTags] = useState([
{ id: 1, text: '可关闭标签1', show: true },
{ id: 2, text: '可关闭标签2', show: true },
{ id: 3, text: '可关闭标签3', show: true },
]);
const handleClose = (id) => {
setTags(tags.map((tag) => (tag.id === id ? { ...tag, show: false } : tag)));
};
const handleTagClick = (text) => {
console.log(`点击了标签：${text}`);
};
return (
<div style={{ padding: '20px' }}>
<h3>基础用法</h3>
<VantTag text="标签" />
<h3>样式风格</h3>
<VantTag text="主要" type="primary" />
<VantTag text="成功" type="success" />
<VantTag text="危险" type="danger" />
<VantTag text="警告" type="warning" />
<h3>空心样式</h3>
<VantTag text="空心" plain />
<VantTag text="空心" type="primary" plain />
<VantTag text="空心" type="success" plain />
<h3>圆角样式</h3>
<VantTag text="圆角标签" round />
<VantTag text="圆角标签" type="primary" round />
<VantTag text="圆角标签" type="success" round />
<h3>标记样式</h3>
<VantTag text="标记" mark />
<VantTag text="标记" type="primary" mark />
<h3>可关闭标签</h3>
<div>
{tags
.filter((tag) => tag.show)
.map((tag) => (
<VantTag
key={tag.id}
text={tag.text}
closeable
onClose={() => handleClose(tag.id)}
onClick={() => handleTagClick(tag.text)}
/>
))}
</div>
<h3>标签大小</h3>
<VantTag text="小号标签" size="medium" />
<VantTag text="普通标签" size="normal" />
<VantTag text="大号标签" size="large" />
<h3>自定义颜色</h3>
<VantTag text="自定义" color="#7232dd" />
<VantTag text="自定义" color="#ffe1e1" />
<VantTag text="自定义" color="#ad0000" />
</div>
);
}
ReactDOM.render(<TagDemo />, mountNode);
```
## VantImage 图片组件
### 基础用法
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { VantImage } from 'mr-component';
function ImageDemo() {
const handleImageClick = (src) => {
console.log(`点击了图片：${src}`);
};
return (
<div style={{ padding: '20px' }}>
<h3>基础用法</h3>
<VantImage
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<h3>填充模式</h3>
<div style={{ display: 'flex', gap: '10px' }}>
<div>
<div>contain</div>
<VantImage
fit="contain"
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div>
<div>cover</div>
<VantImage
fit="cover"
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div>
<div>fill</div>
<VantImage
fit="fill"
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div>
<div>none</div>
<VantImage
fit="none"
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div>
<div>scale-down</div>
<VantImage
fit="scale-down"
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
</div>
<h3>圆形图片</h3>
<VantImage
round
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<h3>加载中提示</h3>
<VantImage width={100} height={100} showLoading />
<h3>加载失败</h3>
<VantImage width={100} height={100} src="https://example.com/404.jpg" showError />
<h3>懒加载</h3>
<VantImage
width={100}
height={100}
lazyLoad
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<h3>点击事件</h3>
<VantImage
width={100}
height={100}
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
onClick={() => handleImageClick('cat.jpeg')}
/>
</div>
);
}
ReactDOM.render(<ImageDemo />, mountNode);
```
## 综合示例
### 移动端表单页面
```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { VantButton, VantInput, VantCell, VantTag, VantImage } from 'mr-component';
function FormDemo() {
const [formData, setFormData] = useState({
username: '',
password: '',
phone: '',
email: '',
});
const [tags, setTags] = useState(['前端', '移动端', 'React']);
const handleInputChange = (field) => (value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = () => {
console.log('表单数据：', formData);
alert('提交成功！');
};
const handleReset = () => {
setFormData({
username: '',
password: '',
phone: '',
email: '',
});
};
return (
<div style={{ padding: '20px', backgroundColor: '#f7f8fa', minHeight: '100vh' }}>
{/* 头部 */}
<div style={{ textAlign: 'center', marginBottom: '30px' }}>
<VantImage
width={80}
height={80}
round
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<h2>用户注册</h2>
</div>
{/* 表单区域 */}
<div style={{ backgroundColor: 'white', borderRadius: '8px', marginBottom: '20px' }}>
<VantCell title="基本信息" />
<VantInput
label="用户名"
placeholder="请输入用户名"
value={formData.username}
onChange={handleInputChange('username')}
required
clearable
/>
<VantInput
label="密码"
type="password"
placeholder="请输入密码"
value={formData.password}
onChange={handleInputChange('password')}
required
/>
<VantInput
label="手机号"
type="tel"
placeholder="请输入手机号"
value={formData.phone}
onChange={handleInputChange('phone')}
required
clearable
/>
<VantInput
label="邮箱"
type="email"
placeholder="请输入邮箱"
value={formData.email}
onChange={handleInputChange('email')}
clearable
/>
</div>
{/* 标签区域 */}
<div
style={{
backgroundColor: 'white',
borderRadius: '8px',
padding: '16px',
marginBottom: '20px',
}}
>
<div style={{ marginBottom: '10px', fontWeight: 'bold' }}>技能标签</div>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
{tags.map((tag, index) => (
<VantTag key={index} text={tag} type="primary" round />
))}
</div>
</div>
{/* 设置选项 */}
<div style={{ backgroundColor: 'white', borderRadius: '8px', marginBottom: '30px' }}>
<VantCell title="账户设置" />
<VantCell title="接收通知" isLink />
<VantCell title="隐私设置" isLink />
<VantCell title="关于我们" isLink />
</div>
{/* 操作按钮 */}
<div style={{ display: 'flex', gap: '12px' }}>
<VantButton text="重置" size="large" onClick={handleReset} block />
<VantButton text="提交注册" type="primary" size="large" onClick={handleSubmit} block />
</div>
</div>
);
}
ReactDOM.render(<FormDemo />, mountNode);
```
## 在低代码平台中使用
将本组件库发布到 npm 后，可以通过以下步骤在低代码平台中使用：
1. **安装组件库**
```bash
npm install mr-component
```
2. **配置资源文件**
将 `build/lowcode/assets-prod.json` 添加到低代码平台的资源配置中
3. **拖拽使用**
在低代码平台的组件面板中找到"移动端组件"分类，直接拖拽使用
4. **可视化配置**
所有组件属性都支持在属性面板中可视化配置，无需手写代码
## 注意事项
- 所有组件都针对移动端优化，建议在移动设备或开发者工具的移动模式下预览
- 组件样式基于 Vant 设计规范，与原生 Vant 组件保持一致
- 支持主题定制，可通过 CSS 变量覆盖默认样式
- 所有事件处理函数都支持在低代码平台中通过动作面板配置