Cube-UI 最近作的更新

Cube-UI 最近作了不少的更新，也有了不少的新特性，並且其中還包含了不少在移動端很經常使用的組件：

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

模塊：

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

Toolbar

Toolbar 就是經常使用的工具欄，每一個選項均可以有獨立的行爲，此外，考慮到移動端寬度不夠的場景，還支持了更多模式，一些優先級不夠的操做能夠放到更多裏。

更多詳情，還請移步官方文檔。

TabBar

TabBar 能夠是獨立的一些 Tab 集合，響應當前選中的 Tab。固然，若是有更負責佈局需求，還能夠支持插槽使用。

固然不少時候咱們是須要和 TabBarPanels 結合在一塊兒使用的，例如以下場景：

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

藉助於 TabBar 靈活的能力，還能夠和 Slide、Scroll 一塊兒組合使用，能夠實現以下很常見的交互效果（橫向移動切換 Tab）：

固然，在電商的場景下，很容易出現 ScrollTab 的需求，只須要將 TabBar 和 Scroll 進行結合：

跟多細節，請移步官方文檔。

Checker

Checker 是更加靈活的選擇組件，能夠自定義須要的佈局樣式。

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

ImagePreview

圖片預覽，經常使用的組件，支持雙指縮放，雙擊放大（縮小）圖片。

在特殊的場景下，你仍然能夠選擇使用插槽知足本身的業務需求：

詳情能夠查看官方文檔。

Sticky

吸附組件是一個很強大的組件，不只能夠和 Scroll 組件結合使用，也能夠和原生滾動效果作結合實現各類吸附效果，不單單能夠實現單個的吸附，還能夠實現連續多個的吸附，最基礎的吸附效果，就是相似於索引列表 IndexList 的效果。

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

詳情能夠在官方文檔查看。

ScrollNavBar

滾動導航條組件，這個效果和現有的滴滴乘客 WebApp 頂導的效果很像，固然還能夠經過 Prop 改變方便爲豎向的模式：

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

ScrollNav

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

還有一種是豎向的效果，更爲常見：

感興趣的能夠查看官方文檔。

RecycleList

可回收的滾動列表，在處理大量內容的列表的時候會頗有用處，默認模式是無限滾動加載更多的模式：

固然，根據實際的場景，咱們可能還會有另一種模式，類無限滾動的模式，須要有墓碑元素存在來填充沒有數據的列表項，效果是這樣的：

更多詳細的，能夠參考官方文檔。

Locale

在最新的版本中，咱們也支持了國際化的能力，內置了中文和英文的語言包，開發者可自定義使用本身的語言包。

除了默認的語言包能力以外，還參考了 Vue 自己的插值表達式和過濾器語法，用於實現特殊的需求，例如：日期格式化相關的。

舉個例子，默認中文語言包中關於 Validator 中相關信息配置

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

create-api

這個在以前的文章中也有介紹，主要用於實現 API 式調用（實例化）組件的，並且提供了「單例」模式（在同一個調用上下文實例上）支持。

如今考慮到期通用能力，目前已經獨立爲一個單獨的倉庫維護，vue-create-api，詳細的使用方式能夠直接參考 GitHub 上的 文檔。

展望

目前 Cube-UI 已經經歷了不少版本迭代，也隨着社區反饋，增長了不少的新的組件，回過頭來發現，咱們其實有不少東西能夠作的更好，因此近期咱們會從新梳理總結，同時也會吸取、發掘、探索更多更好的方案，準備 2.0 版本，依舊提供一個質量可靠、體驗極致、標準規範和擴展性強的組件，可是會更強大、更易用、周邊生態會更好的版本。