Cube-UI 最近做的更新

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

猜你喜欢

转载自juejin.im/post/5bee7004e51d4522567af581