专栏首页编程合格前端之打造一个属于自己的 UI 库

合格前端之打造一个属于自己的 UI 库

摘要: 轮子总得造上一造~

一、项目介绍

vui : 一个私人的vue ui 组件库(移动端为主)

文档官网:https://brickies.github.io/vui/

已有组件

swiper

scroller

search

message

modal

table

picker

select

dropdown

二、安装下载

三、快速开始

3.1 构建项目(配合vue-cli)

3.2 引入vui组件库

你可以引入整个 vui,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vui。

3.2.1 完整引入

在main.js中写入

3.2.2 按需部分引入

在main.js中写入(假如我只需要Scroller和Select组件)

3.2.3 全局注册vui插件

注:完整引入了vui,则无需再注册插件

四、组件用法

4.1 swiper

可以自己调配自己想要的swiper,不一定得是轮播图

4.1.1 Attributes

4.1.2 Events

4.1.3 用法

4.2 scroller(下拉刷新上拉加载)

4.2.1 Attributes

4.2.2 用法

4.3 search

4.3.1 Attributes

4.3.2 Events

4.3.3 用法

只有搜索框

拥有默认的搜索结果列表

定制化结果列表,关键字高亮匹配

4.4 dialog

4.4.1 Attributes

message

modal

4.4.2 用法

msg

modal(插件)

modal(组件)

4.5 table

4.5.1 Attributes

4.5.2 用法

配合scroller进行展示(注:目前table较为简单,后期将进行完善,使得其可以应对不同场景)

4.6 picker

4.6.1 Attributes

4.6.2 用法

4.7 select

4.7.1 Attributes

4.7.2 Events

4.7.3 用法

4.8 dropdown

这个下拉菜单偏PC端的这里就不多做介绍了

以上组件便是目前vui所有的组件了,后期会不断的进行维护并进行新组件的开发。

vui github传送门:https://github.com/Brickies/vui

vui npm传送门:https://www.npmjs.com/package/x-vui

本文来自企鹅号 - 开源中国媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 科技第六感:黑客控制你的车!不信?其实很简单

    黑客控制你的车!不信?其实很简单。 汽车和电脑之间的友谊日益密切且复杂。专业软件可实现车辆各部件的互联,从刹车到方向盘再到到门锁乃至收音机,所有部件均能实现网络...

    企鹅号小编
  • 报告称10后已变成出境游“老司机”屌丝80后:我还没出过国

    2017年即将过去,回顾这一年,你都去了哪儿?大数据帮我们来回忆这一年的足迹。 携程大数据显示,2017年全年,泰国是中国消费者出境游最偏爱的国家之一。日本、马...

    企鹅号小编
  • 中国移动支付发展引领世界

    原标题:中国移动支付发展引领世界 图为消费者通过手机二维码进行付费。新华社发 据俄罗斯卫星通讯社报道,大约在1500年前,中国发明了纸币。公元7世纪,唐代商人开...

    企鹅号小编
  • 《深度学习Ng》课程学习笔记02week1——深度学习的实用层面

    http://blog.csdn.net/u011239443/article/details/77947043

    用户1621453
  • CentOS6 64bit系统一键快速安装VNC桌面实现Linux桌面

    一般我们在项目需要用到远程桌面功能的时候会用到Windows系统,但是大部分海外服务器商都是Linux系统的,我们只可以去安装类似CentOS、Debian、U...

    老蒋
  • 如何高效学习编程技术?

    通过这段时间的看书学习和对编程的思考,结合自己的亲身的学习经历,今天想和大家聊一聊如何高效学习编程技术。

    Wizey
  • WHMCS v7.7.1最新原版下载及开心版授权安装

    前面爱游在分享Whmcs卡密充值插件2.1时已经介绍了WHMCS这个国外流行的域名主机管理软件,爱游以前也是做IDC的,也用过这个系统,还是很不错的,那是还是5...

    爱游博客
  • 支持Python!Facebook开源预测工具Prophet

    【AI研习社】关注AI前沿、开发技巧及技术教程等方面的内容。欢迎技术开发类文章、视频教程等内容投稿,邮件发送至:zhangxian@leiphone.com ...

    AI研习社
  • ubuntu 编译源码包(dsc diff.gz orig.tar.gz):

    以tree实用程序为例,介绍Ubuntu中如何管理源码包,包括查询,获取,编译源码包,直至安装。 1.准备 在获取源码包之前,确保在软件源配置文件/etc/a...

    Enjoy233
  • 专访 Jordan 高徒 Percy Liang:如何开发连续学习的智能体

    【新智元导读】斯坦福大学计算机系助理教授、斯坦福人工智能实验室成员 Percy Liang 是今年 IJCAI 计算机和思想奖(Computers and Th...

    新智元

扫码关注云+社区

领取腾讯云代金券