vue.js程序员GitHub上有趣的资源

先定个小目标: 比方说写一个Vue组件库-Radon-UI

2016-08-31  本文已影响3661人  乖小鬼

Radon -- 孩子的姓名很重要

对于如今竞争如此激烈的前端界来说,出一个组件库,最重要的事情就是起个吊炸天的名字,什么狗蛋啊,狗剩啊,虽然好生养,但是容易被鄙视,我们这个组件库的名字叫Radon(百度百科, Wiki),。

它是一个惰性元素,但它是惰性元素里面最活跃的一个。,正好符合我们的设定,大家为什么使用组件库,或者说为什么用别人的组件库,因为懒,那为什么我们团队来写这个组件库呢?因为我们是懒人里面最勤快(自诩的)的一个,天然匹配,完美!!!同时,Radon具有放射性,能够散发射线,我们也想用自己的能量,小小的影响下前端的Vuers。

点子从何而来

点子是因为我们要做一个自己的后台管理系统,但是系统的设计并没有,只有原型,所以我们要使用别人的组件或者成熟的Css框架来搭建,紧接着是服务端的接口并没有准备好,哦,不对,应该是还没有排上日期写,那么契机在这里产生了,也就是说我们还有一段时间可以准备,于是我们产生了这个想法,定了个小目标,先写组件,后用组件来拼装我们的系统。这一段关键的时间,就这样产生了,正好 Vue插件小王子Awe刚来我们公司,他身上没有任何项目包袱,也不存在历史包袱,可以全心全意搞这个组件库,一拍即可,这个库就这么走上了历史的轨迹。

为什么要自己写

Radon--为何牛逼

基本特点

微创新

图片预览( preivew )

在 Radon UI 中点击图片或者其他任何元素都可以实现打开高清图片的预览。
使用中只需要在根节点中放置 <rd-preview></rd-preview>,之后就可以在任何元素上使用 v-preview 指令来注册相应的高清预览图片。
比如:

<img v-for="img in list" v-preview="img.full" :src="img.small">

这样就完成了图片的预览。大概这个样子

图片预览

全局组件

全局组件是一类比较特殊的组件,如 Modal,Notification 他们只需要放置在适当位置,在需要的时候弹出或者请求交互即可,不需要重复的注册、调用、销毁,所以我们的解决方案是将这一类组件放置在根实例中,直接使用父组件的响应式数据对象,这样任何子组件都可以在业务代码中通过我们定义的 Vue 的实例方法来调用它们,比如:

通过这一行代码,我们就实现了发送了一个消息为“编辑成功”的成功状态,并在3s后自动消失的通知。

 this.$Notification.success('编辑成功', '', 3000)

这里通过简单地调用 $Modal.create 就可以弹出确认框来请求用户交互,用户交互就会相应执行其中的回调函数。

this.$Modal.create('这里是标题','这里应该说点什么',() => {
  console.log('confirm')
},
() => {
  console.log('cancel')
})
radon-ui.png

兼容性

兼容PC和Mobile, 2边都可以用, 统一了公司的UI风格,这样爽不爽。

最后的地址

上一篇 下一篇

猜你喜欢

热点阅读