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 版本，依旧提供一个质量可靠、体验极致、标准规范和扩展性强的组件，可是会更强大、更易用、周边生态会更好的版本。