Vant 移动端组件库

🚀 专为低代码平台设计的 Vant 移动端组件库

📋 项目简介

本项目基于流行的 Vant UI 组件库，为低代码平台量身定制了一套移动端组件。所有组件都经过精心封装，支持可视化配置，可直接在低代码平台中拖拽使用。

⭐ 特性

• 🎯 专为移动端设计 - 基于 Vant 组件库，适配移动设备
• 🛠️ 低代码友好 - 所有组件支持可视化配置
• 📱 响应式布局 - 完美适配各种屏幕尺寸
• 🎨 主题定制 - 支持自定义主题样式
• 🌍 国际化支持 - 内置中文界面
• 📦 开箱即用 - 简单易用的 API 设计

📦 安装

npm install mr-component

或者使用 yarn：

yarn add mr-component

🚀 快速开始

基础用法

import React from 'react';
import { VantButton, VantInput, VantCell } from 'mr-component';

function App() {
  return (
    <div>
      <VantButton text="点击按钮" type="primary" />
      <VantInput placeholder="请输入内容" />
      <VantCell title="单元格" value="内容" />
    </div>
  );
}

export default App;

在低代码平台中使用

1. 发布组件库到 npm
2. 将 build/lowcode/assets-prod.json 配置添加到低代码平台
3. 即可在组件面板中看到所有移动端组件

📚 组件文档

VantButton 按钮组件

移动端按钮，支持多种类型和状态。

Props

| 参数名 | 说明 | 类型 | 默认值 | 可选值 | | -------- | ------------ | -------- | --------- | -------------------------------------------------- | | text | 按钮文字 | string | '按钮' | - | | type | 按钮类型 | string | 'default' | default | primary | success | warning | danger | | size | 按钮尺寸 | string | 'normal' | large | normal | small | mini | | disabled | 是否禁用 | boolean | false | true | false | | loading | 是否加载中 | boolean | false | true | false | | round | 是否圆形按钮 | boolean | false | true | false | | square | 是否方形按钮 | boolean | false | true | false | | block | 是否块级按钮 | boolean | false | true | false | | icon | 左侧图标 | string | '' | - | | onClick | 点击事件 | function | - | - |

示例

// 基础按钮
<VantButton text="默认按钮" />

// 主要按钮
<VantButton text="主要按钮" type="primary" />

// 加载状态
<VantButton text="加载中" loading />

// 圆形按钮
<VantButton text="圆形按钮" round />

VantInput 输入框组件

移动端输入框，支持多种输入类型。

Props

| 参数名 | 说明 | 类型 | 默认值 | 可选值 | | ----------- | ------------ | -------- | --------- | ----------------------------------------------------------- | | placeholder | 占位符文字 | string | '请输入' | - | | type | 输入框类型 | string | 'text' | text | number | password | tel | search | email | url | | label | 输入框标签 | string | '' | - | | disabled | 是否禁用 | boolean | false | true | false | | clearable | 是否可清除 | boolean | false | true | false | | required | 是否必填 | boolean | false | true | false | | maxLength | 最大输入长度 | number | undefined | - | | onChange | 值改变事件 | function | - | - |

示例

// 基础输入框
<VantInput placeholder="请输入用户名" />

// 密码输入框
<VantInput type="password" placeholder="请输入密码" />

// 带标签的输入框
<VantInput label="手机号" type="tel" placeholder="请输入手机号" />

VantCell 单元格组件

移动端单元格，适用于列表展示。

Props

| 参数名 | 说明 | 类型 | 默认值 | 可选值 | | --------- | ---------------- | -------- | -------- | --------------- | | title | 左侧标题 | string | '' | - | | value | 右侧内容 | string | '' | - | | label | 标题下方描述 | string | '' | - | | icon | 左侧图标 | string | '' | - | | size | 单元格大小 | string | 'normal' | normal | large | | border | 是否显示边框 | boolean | true | true | false | | center | 是否垂直居中 | boolean | false | true | false | | required | 是否显示必填星号 | boolean | false | true | false | | clickable | 是否可点击 | boolean | false | true | false | | isLink | 是否显示箭头 | boolean | false | true | false | | onClick | 点击事件 | function | - | - |

示例

// 基础单元格
<VantCell title="用户名" value="张三" />

// 带描述的单元格
<VantCell title="手机号" value="138****8888" label="已验证" />

// 可点击的单元格
<VantCell title="设置" isLink clickable />

VantTag 标签组件

移动端标签，用于标记分类。

Props

| 参数名 | 说明 | 类型 | 默认值 | 可选值 | | --------- | ------------ | -------- | --------- | -------------------------------------------------- | | text | 标签文字 | string | '标签' | - | | type | 标签类型 | string | 'default' | default | primary | success | warning | danger | | size | 标签大小 | string | 'normal' | normal | large | medium | | color | 自定义颜色 | string | '' | - | | plain | 是否镂空 | boolean | false | true | false | | round | 是否圆角 | boolean | false | true | false | | mark | 是否标记样式 | boolean | false | true | false | | closeable | 是否可关闭 | boolean | false | true | false | | onClick | 点击事件 | function | - | - | | onClose | 关闭事件 | function | - | - |

示例

// 基础标签
<VantTag text="默认标签" />

// 主要标签
<VantTag text="主要标签" type="primary" />

// 可关闭标签
<VantTag text="可关闭" closeable />

// 自定义颜色
<VantTag text="自定义" color="#7232dd" />

VantImage 图片组件

移动端图片组件，支持懒加载和多种显示模式。

Props

| 参数名 | 说明 | 类型 | 默认值 | 可选值 | | ----------- | ---------------- | ---------------- | --------- | ---------------------------------------------- | | src | 图片链接 | string | '' | - | | alt | 替代文字 | string | '' | - | | width | 图片宽度 | string | number | 'auto' | - | | height | 图片高度 | string | number | 'auto' | - | | fit | 图片填充模式 | string | 'contain' | contain | cover | fill | none | scale-down | | round | 是否圆形 | boolean | false | true | false | | lazyLoad | 是否懒加载 | boolean | false | true | false | | showError | 是否显示错误图片 | boolean | true | true | false | | showLoading | 是否显示加载图片 | boolean | true | true | false | | onClick | 点击事件 | function | - | - |

示例

// 基础图片
<VantImage src="https://example.com/image.jpg" />

// 圆形头像
<VantImage
  src="https://example.com/avatar.jpg"
  width={60}
  height={60}
  round
/>

// 懒加载图片
<VantImage
  src="https://example.com/large-image.jpg"
  lazyLoad
  fit="cover"
/>

🔧 开发指南

本地开发

# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run lowcode:dev

# 访问 http://localhost:3333

构建发布

# 构建组件库
npm run lowcode:build

# 发布到 npm
npm publish

在低代码平台中使用

1. 确保组件库已发布到 npm
2. 复制 build/lowcode/assets-prod.json 配置
3. 在低代码平台的资源配置中添加此配置
4. 即可在组件面板中使用所有移动端组件

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 git checkout -b feature/AmazingFeature
3. 提交变更 git commit -m 'Add some AmazingFeature'
4. 推送到分支 git push origin feature/AmazingFeature
5. 开启 Pull Request

📄 许可证

本项目基于 MIT 许可证开源，详见 LICENSE 文件。

🔗 相关链接

• Vant 官方文档
• 阿里低代码引擎
• React 官方文档