【新開源報道 26】滴滴開源基於 Vue.js 的移動端組件庫 cube-ui

大數據技術2018-04-11 15:15:57

最前線(ID:OpenSourceTop) 猿妹 整編

綜合自:https://didi.github.io/cube-ui/



繼 6 月份開源 Android 端插件化框架 VirtualAPK 後,滴滴近日又開源了第二個項目 —— 基於 Vue.js 實現的移動端庫 cube-ui 。 


移動端組件庫 cube-ui


授權協議:Apache

開發語言:JavaScript

操作系統:跨平台

開發廠商:滴滴

Github:https://didi.github.io/cube-ui/


cube-ui 簡介


cube-ui 是由滴滴開源的基於 Vue.js 實現的移動端組件庫。


cube-ui 具有如下功能特性:

● 質量可靠:由滴滴內部組件庫精簡提煉而來,歷經考驗,並且每個組件都有充分單元測試,為後續集成提供保障。

● 體驗極致:以迅速響應、動畫流暢、接近原生為目標,在交互體驗方面追求極致。

● 標準規範:遵循統一的設計交互標準,高度還原設計效果;接口標準化,統一規範使用方式,開發更加簡單高效。

● 擴展性強:支持按需引入和後編譯,輕量靈活;擴展性強,可以方便地基於現有組件實現二次開發。



cube-ui 基礎組件


Button:按鈕,提供了各種類型、樣子、狀態以及圖標。

Checkbox 複選框:複選框,可設置其狀態、傳入特殊 class 以及複選框圖標位置。

CheckboxGroup 複選框組就是一組複選框,主要用來選擇一組可選項;有垂直和水平兩種樣式。

Loading 加載中:加載,提供了可自定義大小的加載動畫。

Tip:提示,用於彈出提示氣泡框。通過在 Tip 組件上添加 ref 屬性,獲得對於組件的引用,然後調用 Tip 組件向外暴露出來的 show、hide 方法來控制組件的顯示或隱藏。



cube-ui 彈層組件


Popup 彈層:底層彈層組件,主要用於基於此組件實現上層組件封裝,只提供了基礎功能:指定類型、是否有背景層、顯示內容(HTML)以及是否居中。

內置所有的彈層類組件都是基於此組件實現,包括:Toast、Picker、TimePicker、Dialog、ActionSheet。

Toast:Toast組件主要用於非模態信息提醒,如顯示時間設置,無需用户交互。

Picker組件:Picker組件支持多列選擇器及數據聯動。

TimePicker組件:TimePicker組件提供了常用的日期選擇功能。

Dialog:Dialog模態框組件,提供了多種樣式及交互形式。

ActionSheet:ActionSheet操作列表提供了兩種常見的樣式,靈活可控內容。



cube-ui 滾動組件


Scroll 滾動:滾動列表,提供了優質的原生滾動體驗,便捷的配置項和事件,是一個基於better-scroll進行封裝的組件。

Slide 幻燈片:輪播圖,提供了常見的輪播及swipe的功能,也是一個基於better-scroll進行封裝的組件。

IndexList 索引列表:索引列表,提供了列表索引的功能,也是一個基於better-scroll進行封裝的組件。


滾動類組件都是基於 better-scroll 實現,而 Scroll 組件就是對 better-scroll 的封裝。



cube-ui 其他模塊


除了組件之外,cube-ui 還有一些特殊的模塊。

style:樣式部分,如果你是在按需引入使用的場景下,那麼建議在入口文件處也要引入這個模塊,因為它包含基礎的 reset、基礎通用樣式以及內置 icon。

create-api:有些時候,開發者可能也需要自己封裝的組件支持 API 式調用,此時可以通過引入 create-api 模塊或者通過全局的 Cube.createAPI 接口來達到封裝目的。

better-scroll:組件庫依賴的一個庫,為了避免重複引入問題,我們暴露出了這個模塊。



快速上手


安裝



cube-ui 搭配 webpack 2+ 支持後編譯和普通編譯 2 種構建方式(默認使用後編譯),使用前都需要修改應用的依賴和配置。


使用


全部引入,一般在入口文件中:




按需引入:



注意: 按需引入的話,是不會打包基礎樣式部分的,所以在使用的時候需要引入 style 模塊。


示例



附:新開源報道彙總

《【新開源報道 24】Google 開源 Docker 鏡像差異分析工具 container-diff》

《【新開源報道 24】美團點評開源MySQL閃回工具 —— MyFlash》

《【新開源報道 23】IBM 推出首套開源現代化字體 —— IBM Plex》

《【新開源報道 22】Microsoft 開源用於 VS Code 的 Java Debugger》

《【新開源報道 21】阿里開源容器技術Pouch和P2P文件分發系統“蜻蜓”》

《【新開源報道 20】Uber正式開源其分佈式跟蹤系統Jaeger》

《【新開源報道 19】Uber與斯坦福大學開源深度概率編程語言Pyro》

《【新開源報道 18】谷歌開放內部工具 Colaboratory 來協助 AI 開發》

《【新開源報道 17】這波開源滿分!清華大學開源網絡嵌入的工具包 —— OpenNE

《【新開源報道 16】AI開發者福音!微軟亞馬遜聯合發佈 Gloun》

《【新開源報道 15】谷歌發佈量子開源軟件,量子計算機對科學家免費開放 》

《【新開元報道 14】微軟開源用於Spark的深度學習庫MMLSpark》

《【新開源報道 13】Facebook 開源幫助開發者消滅最頑固的軟件 bug 的工具》

《【新開源報道 12】不只是阿里巴巴的操作系統,AliOS 宣佈開源》

《【新開源報道 11】重磅!阿里巴巴正式開源全球化OpenMessaging和ApsaraCache項目》

《【新開源報道 10】IBM 和谷歌等巨頭聯手為開發者推出開源容器安全工具Grafeas》

《【新開源報道 9】Google開源Abseil,為C++和Python開發提供支持》

《【新開源報道 8】serverless 領域的福音!Oracle 宣佈開源 Fn project》

《【新開源報道 7】蘋果在 GitHub 上公佈 macOS 和 iOS 內核源碼》

《【新開源報道 6】百度開源移動端深度學習框架mobile-deep-learning(MDL)》

《【新開源報道 5】百度正式開源其 RPC 框架 brpc》

《【新開源報道 4】IBM 開源動態的應用服務器運行時環境 Open Liberty》

《【新開源報道 3】微信後台團隊最近開源力作:PhxQueue分佈式隊列》

《【新開源報道 2】喜大普奔!阿里即將開源 ApsaraCache,雲數據庫 Redis 版分支》

【新開源報道 1】騰訊 Web UI 解決方案 QMUI Web 正式回遷開源》



●本文編號99,以後想閲讀這篇文章直接輸入99即可

●輸入m獲取文章目錄

↓↓↓ 點擊"閲讀原文" 進入GitHub詳情頁 

閲讀原文

TAGS: