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