滴滴开源基于金融场景的Vuejs组件库Mand Mobile

4月11日消息，滴滴今日宣布开源一款基于金融场景的Vuejs组件库——Mand Mobile。该工具是基于Vuejs 2.0开发的移动端组件库，它遵循统一的视觉设计规范，由包括基础、表单、操作反馈和业务在内的四类组件组成。Mand Mobile致力于提升金融相关产品的用户体验，提高设计和研发效率，让复杂的场景变得简单。

由于金融产品种类繁多，功能相对来说较复杂，设计及开发成本较高。从各种表单的填写，验证码/密码输入，到图表展示，再到数字键盘和收银台等，这些功能使用频率较高，对于视觉一致性和兼容性都有着更高的要求。

在这一背景下，滴滴出行战略事业群前端团队尝试在项目的设计和开发过程中积累了部分高频使用的组件，逐渐梳理出统一的视觉和开发规范，以期能帮助团队快速地迭代出产品。经过一年时间的积累，组件库已应用于四大业务板块共10余款产品中，并在业务的考验中逐渐成熟。

项目特点

• 丰富的组件

Mand Mobile提供了30+的实用组件，能够满足移动端页面开发中的大部分需求。其中的业务类组件还针对金融领域，提取了包括图表、数字键盘等，从而更好地满足相关产品的开发需要。

图片描述

• 统一的视觉规范

视觉设计既要兼顾可用性，又要具备信息传达的直观度和界面展现的美观度。为了达成这一目标，Mand Mobile的视觉设计规范划分为功能型组件规范和非功能性视觉规范两部分。功能型组件包括但不限于浮层，提示，弹窗，表单等，强调平台化的统一复用和对接研发的高效率实现。非功能性视觉规范会定义主辅颜色体系，场景按钮等。

Mand Mobile 的视觉规范由滴滴战略事业群设计师设计并维护，保证了应用的项目内部、项目之间都能保持高度的视觉一致性。简洁大气的设计风格，在保证项目整体的美观与格调的同时，也让其有能力适应更广泛的应用场景。

• 详细的文档和示例

我们为每个组件编写了详细的说明文档，从组件的引入方法，到属性Props，事件Events，公共方法Methods等都有详细的介绍。为了更直观的介绍组件使用方法以及效果，我们针对每个组件都提供了多个可以即时操作的demo，从而让用户能更直观地了解组件的各项功能。

Chart Demo

图片描述

Chart API

图片描述

• 严格控制的Bundle体积

在保证功能完善、强大的同时，Mand Mobile 还在Bundle体积上表现出色。Mand Mobile可导出es，umd两种格式包，其中es打包大小仅为139kb(gzip 34kb)，umd格式最终大小仅为135kb(gzip 33kb)，从而为使用者在控制项目体积上提供有力的帮助。

除此之外，Mand Mobile还支持tree shaking以及支持按需加载，对于仅需使用部分组件的项目来说，这能进一步减小项目的体积。具体的配置方法可参考快速上手中的引用部分。

• 灵活转换的样式主题

尽管Mand Mobile 的设计风格简约优雅，足以适应大部分项目的视觉要求，但您仍可为其定制专属的样式主题。Mand Mobile内部样式基于Stylus开发，可通过全局和组件的样式变量对主题样式进行调整。


项目反馈

该项目开源负责人表示，Mand Mobile 刚刚起步不久，目前仍存在一些不够完善的地方。在继续完善现有组件的同时，我们还会继续积累更多的实用组件，另外也会尝试将视觉和逻辑抽离，从而来满足更多更广泛的使用需求。

目前该项目已经在开源平台GitHub上线，感兴趣的工程师可以去感受这款开源组建的强大功能，也可以在页面提交宝贵建议。

相关链接

• Home: didi.github.io/mand-mobile
• Github: github.com/didi/mand-mobile