mr-component

# Vant 移动端组件库 🚀 专为低代码平台设计的 Vant 移动端组件库 ## 📋 项目简介本项目基于流行的 [Vant](https://vant-contrib.gitee.io/vant/#/) UI 组件库，为低代码平台量身定制了一套移动端组件。所有组件都经过精心封装，支持可视化配置，可直接在低代码平台中拖拽使用。 ## ⭐ 特性 - 🎯 **专为移动端设计** - 基于 Vant 组件库，适配移动设备 - 🛠️ **低代码友好** - 所有组件支持可视化配置 - 📱 **响应式布局** - 完美适配各种屏幕尺寸 - 🎨 **主题定制** - 支持自定义主题样式 - 🌍 **国际化支持** - 内置中文界面 - 📦 **开箱即用** - 简单易用的 API 设计 ## 📦 安装 ```bash npm install mr-component ``` 或者使用 yarn： ```bash yarn add mr-component ``` ## 🚀 快速开始 ### 基础用法 ```jsx 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 | - | - | #### 示例 ```jsx // 基础按钮 <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 | - | - | #### 示例 ```jsx // 基础输入框 <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 | - | - | #### 示例 ```jsx // 基础单元格 <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 | - | - | #### 示例 ```jsx // 基础标签 <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 | - | - | #### 示例 ```jsx // 基础图片 <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" /> ``` ## 🔧 开发指南 ### 本地开发 ```bash # 克隆项目 git clone <repository-url> # 安装依赖 npm install # 启动开发服务器 npm run lowcode:dev # 访问 http://localhost:3333 ``` ### 构建发布 ```bash # 构建组件库 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](LICENSE) 文件。 ## 🔗 相关链接 - [Vant 官方文档](https://vant-contrib.gitee.io/vant/#/) - [阿里低代码引擎](https://lowcode-engine.cn/) - [React 官方文档](https://reactjs.org/)