Mand Mobile - 基於金融場景的Vuejs組件庫

Mand Mobile 是由滴滴出行戰略事業羣前端團隊基於Vuejs 2.0開發的移動端組件庫。它遵循統一的視覺設計規範，由包括基礎、表單、操做反饋和業務在內的四類組件組成。Mand Mobile致力於提高金融相關產品的用戶體驗，提升設計和研發效率，讓複雜的場景變得簡單。

項目背景

金融類產品種類繁多，功能相對來講較複雜，設計及開發成本較高。從各類表單的填寫，驗證碼/密碼輸入，到圖表展現，再到數字鍵盤和收銀臺。這些功能每每使用頻率較高，對於視覺一致性和兼容性都有着更高的要求。

在這個背景下，咱們嘗試在項目的設計和開發過程當中積累了部分高頻使用的組件，逐漸梳理出統一的視覺和開發規範，以指望可以幫助團隊快速地迭代出產品。通過一年時間的積累，組件庫已應用於四大業務板塊共10餘款產品中，並在業務的考驗中不斷成熟。

掃碼體驗

項目特色

豐富的組件
Mand Mobile提供了30+的實用組件，可以知足移動端頁面開發中的大部分需求。其中的業務類組件還針對金融領域，提取了包括圖表、數字鍵盤等，從而更好地知足相關產品的開發須要。

統一的視覺規範
視覺設計既要兼顧可用性，又要具有信息傳達的直觀度和界面展示的美觀度。爲了達成這一目標，Mand Mobile 的視覺設計規範劃分爲功能型組件規範和非功能性視覺規範兩部分。功能型組件包括但不限於浮層，提示，彈窗，表單等，強調平臺化的統一複用和對接研發的高效率實現。非功能性視覺規範會定義主輔顏色體系，場景按鈕等。

Mand Mobile 的視覺規範由滴滴戰略事業羣設計師設計並維護，保證了應用的項目內部、項目之間都能保持高度的視覺一致性。簡潔大氣的設計風格，在保證項目總體的美觀與格調的同時，也讓其有能力適應更普遍的應用場景。

詳細的文檔和示例
咱們爲每一個組件編寫了詳細的說明文檔，從組件的引入方法，到屬性Props，事件Events，公共方法Methods等都有詳細的介紹。爲了更直觀的介紹組件使用方法以及效果，咱們針對每一個組件都提供了多個能夠即時操做的demo，從而讓用戶能更直觀地瞭解組件的各項功能。

嚴格控制的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 剛剛起步不久，目前仍存在一些不夠完善的地方。在繼續完善現有組件的同時，咱們還會繼續積累更多的實用組件，另外也會嘗試將視覺和邏輯抽離，從而來知足更多更普遍的使用需求。

咱們衷心地指望 Mand Mobile 的出現可以對您的工做有所幫助。與此同時，咱們也指望獲得您的支持、反饋和參與，爲讓金融場景開發更簡單的目標而共同努力。您遇到的任何問題，可隨時在GitHub提交。

相關連接

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