Mand Mobile

面向金融场景的Vue移动端UI组件库，由滴滴金融泛前端团队（MFE）开发维护，提供基于Vue 2.x（Mand Mobile）和Vue 3.0（Mand Mobile Next）两套版本，专为金融业务的高复杂度、强交互、多表单需求设计。

它能做什么

Mand Mobile 提供一套完整的移动端UI组件，覆盖金融场景中常见的表单输入、金额展示、数字键盘、验证码倒计时、协议勾选、进度引导等高频需求。组件库特别强化了金融业务中的安全与合规细节，例如金额组件自动处理千分位与精度、键盘组件支持自定义数字布局、弹窗组件内置协议确认流程。

• 金额组件：自动格式化千分位、小数位数，支持货币符号配置
• 数字键盘：可自定义键位布局，支持随机键盘防窥探
• 验证码倒计时：集成发送间隔限制与重发逻辑，适配金融风控要求
• 协议勾选：支持多协议联动、必勾选校验，符合金融合规流程
• 进度引导：多步骤表单的步骤条与状态指示，适配贷款/开户等流程

适合谁用

主要面向金融行业的前端开发团队，尤其是使用Vue技术栈、需要快速搭建移动端金融业务界面的场景。滴滴金融内部已大规模使用，组件库的设计与测试均基于真实金融业务需求，如借款、理财、保险、信用卡等模块。

• 金融科技公司：银行、保险、证券、消费金融等移动端H5开发
• Vue 2/3项目：Mand Mobile支持Vue 2，Mand Mobile Next支持Vue 3
• 高安全性要求场景：内置防窥键盘、协议强制确认、金额精度控制

怎么上手

Mand Mobile 提供npm安装方式，支持按需引入与全量引入。文档站包含组件示例、API说明、Changelog及贡献指南。GitHub仓库（didi/mand-mobile）提供源码、示例项目及Issue反馈渠道。Gitee镜像同步维护，便于国内开发者访问。

• npm安装：npm install mand-mobile --save（Vue 2版本）
• 按需引入：配合babel-plugin-import实现组件按需加载
• 文档站：https://didi.github.io/mand-mobile/（Vue 2）/ https://mand-mobile.github.io/mand-mobile-next/zh-CN/（Vue 3）
• GitHub仓库：https://github.com/didi/mand-mobile，Star 133，Fork 23
• Gitee镜像：https://gitee.com/didiopensource/mand-mobile，国内访问更稳定

版本与维护

Mand Mobile 目前维护两个主要版本：2.x（基于Vue 2）和Mand Mobile Next（基于Vue 3）。2.x版本已发布至v2.7.0，Next版本持续迭代。项目由滴滴金融泛前端团队（MFE）维护，社区活跃，Issue与PR响应及时。

• Mand Mobile 2.x：最新版v2.7.0，基于Vue 2，稳定生产可用
• Mand Mobile Next：基于Vue 3，面向未来技术栈
• 版本标签：GitHub仓库共81个标签，覆盖各版本发布

注意事项

Mand Mobile 专为移动端设计，不适用于PC端或桌面浏览器。组件库依赖Vue生态，需确保项目Vue版本与组件版本匹配。金融场景下的安全合规需求（如防窥键盘、金额精度）已内置，但业务方仍需根据具体监管要求进行适配。

• 仅支持移动端H5，不兼容PC端
• Vue 2项目使用mand-mobile，Vue 3项目使用mand-mobile-next
• 金额组件精度默认保留两位小数，可通过配置修改
• 防窥键盘需在初始化时开启随机布局选项

常见问题

Q1：Mand Mobile 和 Mand Mobile Next 有什么区别？

A1：Mand Mobile 基于 Vue 2.x，最新版本 v2.7.0；Mand Mobile Next 基于 Vue 3.0，是面向未来的版本。两者组件设计与API基本一致，但底层框架不同，项目需根据自身Vue版本选择对应版本。

Q2：Mand Mobile 是否支持按需加载？如何配置？

A2：支持。需安装 babel-plugin-import，并在 babel 配置中设置 libraryName: 'mand-mobile'，即可实现组件按需引入，减少打包体积。

Q3：Mand Mobile 的防窥键盘如何启用？

A3：在数字键盘组件初始化时，设置 random 属性为 true，即可启用随机键位布局，防止用户输入时被窥屏。该功能专为金融场景的密码/金额输入设计。

更多同类工具与网站,可在移动端分类继续挑选。

信息核实于 2026年7月,具体以官网为准。