Cube-UI 最近做的更新

滴滴WebApp架構組發表於2018-11-21

Cube-UI 最近做了很多的更新,也有了很多的新特性,而且其中還包含了很多在移動端很常用的元件:

  • Toolbar
  • TabBar
  • Checker
  • ImagePreview
  • Sticky
  • ScrollNavBar
  • ScrollNav
  • RecycleList

模組:

  • Locale 國際化
  • create-api 分拆為獨立的 NPM 包 vue-create-api

Toolbar

Toolbar 就是常用的工具欄,每個選項都可以有獨立的行為,此外,考慮到移動端寬度不夠的場景,還支援了更多模式,一些優先順序不夠的操作可以放到更多裡。

Toolbar

更多詳情,還請移步官方文件

TabBar

TabBar 可以是獨立的一些 Tab 集合,響應當前選中的 Tab。當然,如果有更負責佈局需求,還可以支援插槽使用。

TabBar預設

當然很多時候我們是需要和 TabBarPanels 結合在一起使用的,例如如下場景:

TabBar & TabBarPanels

這樣就能實現上邊的 Tab 和下邊的 Panels 聯動的效果。

藉助於 TabBar 靈活的能力,還可以和 Slide、Scroll 一起組合使用,可以實現如下很常見的互動效果(橫向移動切換 Tab):

TabBar組合

當然,在電商的場景下,很容易出現 ScrollTab 的需求,只需要將 TabBar 和 Scroll 進行結合:

ScrollTab

跟多細節,請移步官方文件

Checker

Checker 是更加靈活的選擇元件,可以自定義需要的佈局樣式。

Checker

在自定義的選擇場景會比較有用,詳情移步官方文件

ImagePreview

圖片預覽,常用的元件,支援雙指縮放,雙擊放大(縮小)圖片。

ImagePreview

在特殊的場景下,你仍然可以選擇使用插槽滿足自己的業務需求:

ImagePreview自定義

詳情可以檢視官方文件

Sticky

吸附元件是一個很強大的元件,不僅可以和 Scroll 元件結合使用,也可以和原生滾動效果做結合實現各種吸附效果,不僅僅可以實現單個的吸附,還可以實現連續多個的吸附,最基礎的吸附效果,就是類似於索引列表 IndexList 的效果。

Sticky

當然,也有一些獨特的場景,例如微信朋友圈的效果,這個時候可能會涉及到“漸變”吸附的效果,在滾動過程中,樣式會隨著滾動而發生變化。

Sticky Wechat

詳情可以在官方文件檢視。

ScrollNavBar

滾動導航條元件,這個效果和現有的滴滴乘客 WebApp 頂導的效果很像,當然還可以通過 Prop 改變方便為豎向的模式:

ScrollNavBar

當選中了某一項,會自動計算滾動至居中位置,詳情移步官方文件

ScrollNav

滾動導航元件,這個在外賣場景或者電商場景都是比較常用的,自動實現定位關聯的效果。這個元件本身是一個組合元件,利用上邊所說的 Sticky 和 ScrollNavBar 組合起來的元件。

ScrollNav

還有一種是豎向的效果,更為常見:

ScrollNav side style

感興趣的可以檢視官方文件

RecycleList

可回收的滾動列表,在處理大量內容的列表的時候會很有用處,預設模式是無限滾動載入更多的模式:

RecycleList

當然,根據實際的場景,我們可能還會有另外一種模式,類無限滾動的模式,需要有墓碑元素存在來填充沒有資料的列表項,效果是這樣的:

xx

更多詳細的,可以參考官方文件

Locale

在最新的版本中,我們也支援了國際化的能力,內建了中文和英文的語言包,開發者可自定義使用自己的語言包。

除了預設的語言包能力之外,還參考了 Vue 本身的插值表示式和過濾器語法,用於實現特殊的需求,例如:日期格式化相關的。

舉個例子,預設中文語言包中關於 Validator 中相關資訊配置

{
    validator: {
      // ...
      min: {
        array: '請選擇至少 {{config}} 項',
        date: '請選擇 {{config | toLocaleDateString("yyyy年MM月dd日")}} 之後的時間',
      }
    }
}
複製程式碼

create-api

這個在之前的文章中也有介紹,主要用於實現 API 式呼叫(例項化)元件的,而且提供了“單例”模式(在同一個呼叫上下文例項上)支援。

現在考慮到期通用能力,目前已經獨立為一個單獨的倉庫維護,vue-create-api,詳細的使用方式可以直接參考 GitHub 上的 文件

展望

目前 Cube-UI 已經經歷了很多版本迭代,也隨著社群反饋,增加了很多的新的元件,回過頭來發現,我們其實有很多東西可以做的更好,所以近期我們會重新梳理總結,同時也會吸收、發掘、探索更多更好的方案,準備 2.0 版本,依舊提供一個質量可靠、體驗極致、標準規範和擴充套件性強的元件,但是會更強大、更易用、周邊生態會更好的版本。

相關文章