滴滴开源基于 Vue.js 的移动端组件库 cube-ui

综合自:https://didi.github.io/cube-ui/

继 6 月份开源Android 端插件化框架 VirtualAPK后,滴滴近日又开源了第二个项目 —— 基于 Vue.js 实现的移动端组件库 cube-ui 。

移动端组件库 cube-ui

授权协议:Apache

开发语言:JavaScript

操作系统:跨平台

开发厂商:滴滴

Github:https://didi.github.io/cube-ui/

cube-ui 简介

cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。

cube-ui 具有如下功能特性:

● 质量可靠:由滴滴内部组件库精简提炼而来,历经考验,并且每个组件都有充分单元测试,为后续集成提供保障。

● 体验极致:以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。

● 标准规范:遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。

● 扩展性强:支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

cube-ui 基础组件

Button:按钮,提供了各种类型、样子、状态以及图标。

Checkbox 复选框:复选框,可设置其状态、传入特殊 class 以及复选框图标位置。

CheckboxGroup 复选框组:复选框组就是一组复选框,主要用来选择一组可选项;有垂直和水平两种样式。

Loading 加载中:加载,提供了可自定义大小的加载动画。

Tip:提示,用于弹出提示气泡框。通过在Tip组件上添加ref属性,获得对于组件的引用,然后调用Tip组件向外暴露出来的 show、hide 方法来控制组件的显示或隐藏。

cube-ui 弹层组件

Popup 弹层:底层弹层组件,主要用于基于此组件实现上层组件封装,只提供了基础功能:指定类型、是否有背景层、显示内容(HTML)以及是否居中。

内置所有的弹层类组件都是基于此组件实现,包括:Toast、Picker、TimePicker、Dialog、ActionSheet。

Toast:Toast组件主要用于非模态信息提醒,如显示时间设置,无需用户交互。

Picker组件:Picker组件支持多列选择器及数据联动。

TimePicker组件:TimePicker组件提供了常用的日期选择功能。

Dialog:Dialog模态框组件,提供了多种样式及交互形式。

ActionSheet:ActionSheet操作列表提供了两种常见的样式,灵活可控内容。

cube-ui 滚动组件

Scroll 滚动:滚动列表,提供了优质的原生滚动体验,便捷的配置项和事件,是一个基于better-scroll进行封装的组件。

Slide 幻灯片:轮播图,提供了常见的轮播及swipe的功能,也是一个基于better-scroll进行封装的组件。

IndexList 索引列表:索引列表,提供了列表索引的功能,也是一个基于better-scroll进行封装的组件。

滚动类组件都是基于 better-scroll 实现,而 Scroll 组件就是对 better-scroll 的封装。

cube-ui 其他模块

除了组件之外,cube-ui 还有一些特殊的模块。

style:样式部分,如果你是在按需引入使用的场景下,那么建议在入口文件处也要引入这个模块,因为它包含基础的 reset、基础通用样式以及内置 icon。

create-api:有些时候,开发者可能也需要自己封装的组件支持 API 式调用,此时可以通过引入 create-api 模块或者通过全局的 Cube.createAPI 接口来达到封装目的。

better-scroll:组件库依赖的一个库,为了避免重复引入问题,我们暴露出了这个模块。

快速上手

安装

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。

使用

全部引入,一般在入口文件中:

按需引入:

注意:按需引入的话,是不会打包基础样式部分的,所以在使用的时候需要引入 style 模块。

示例

本文来自企鹅号 - 安卓开发媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇

这些天,在给博客的标签页(tag)添加跳转和 META 动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白! 总结前,先来回顾下小白张戈在...

4116
来自专栏木制robot技术杂谈

Python + Splinter 实现浏览器自动化操作入门指南

前言 Splinter 是用 Python 开发的一个开源web自动化测试的工具集。 它可以帮你自动化浏览器的行为,比如浏览 URLs 并和页面进行交互。 快...

4066
来自专栏小狼的世界

学习使用YUI3

对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目...

652
来自专栏静晴轩

Cleaver快速制作网页PPT

如今互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。微软最赚钱的Office办公软件,也正在被免费的web应用所吞噬。如今即便薄学如我...

3358
来自专栏编程

用Hexo+Github搭建个人博客

技能、干货、感悟,在这里发现世界的美! 1.为什么要写博客?在什么平台上写博客? 最近我想把自己学过的一些知识复习整理一下,于是我就想到了通过写博客来记录的这种...

2169
来自专栏技术小黑屋

超简单生成微博微信应用签名

集成微博或者微信的SDK时,编辑应用信息要求填写应用签名,官方推荐下载一个apk工具。有那么复杂么,直接终端就可以搞定。

712
来自专栏中国Android研究院

番外篇-Flutter初识三问

在Android中,您可以通过直接对view进行改变来更新视图。然而,在Flutter中Widget是不可变的,不会直接更新,而必须使用Widget的状态。

993
来自专栏从零开始学自动化测试

appium+python自动化41-微信公众号

本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作

1462
来自专栏ytkah

微信公众平台悄悄地更新了自定义菜单功能

  微信公众号可以在会话界面底部设置自定义菜单,您可以按需设定菜单项,并可为其设置响应动作。您可以通过点击菜单项,收到您设定的消息,或者跳转到设定的链接。昨晚微...

3605
来自专栏along的开发之旅

adb shell 如何选择特定的设备?

其实这个一查,stackoverflow或者百度谷歌一大把,比如这个“http://stackoverflow.com/questions/14654718/h...

462

扫码关注云+社区