如何做一个avalon组件
在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌。
组件是由JS,HTML,CSS构成
JS 以AMD形式组织,引入HTML与CSS
HTML是组件的模板, 模板里面使用ms-*等指令
JS内部是一个avalon.component方法的调用
avalon.component有两个参数,第一个是标签名(务必全部小写并且中间存在冒号,冒号前面是ms, oni等表示UI库的名字,默认ms已经生效,否则要用avalon.library来声明,冒号后面是组件的名字)
下面一个样板代码:
define(["avalon","template.html","style.css"], function(avalon, template){
var _interface = function(){}
avalon.component("ms:button",{
$template: template,
a: 1,
b: 2,
aMethod: _interface ,//组件的方法,在开始必须为空方法
bMethod: _interface,//组件的方法,在开始必须为空方法
onAevent: _interface,//组件的事件回调,在开始必须为空方法,必须以on开头,后面是大写,如onSelect
onBevent: _interface,//组件的事件回调,在开始必须为空方法, 必须以on开头,后面是大写
$init: function(vm, el){
//vm就是当前组件的vm, el就是此自定义标签
},
$ready: function(vm, el){
//在这里重写所有空方法
},
$dispose:function(vm, el){
//在这里移除事件与清空节点内部
el.innerHTML = ""
}
}
})
return avalon
})
avalon.component会在该组件$init回调被调用时,在avalon.vmodels上添加该组件的VM,此VM就是$init, $ready, $dispose传入的第一个参数,它拥有a, b, aMethod, bMethod等你声明好的属性与方法。
当然,其实还有$construct, $$template, $childReady等回调,还有$replace, $container, $slot等配置项。详见官网
然后你在页面引入avalon,与该组件的JS(当然以AMD方式引入),然后页面使用<ms:button></ms:button>这组件就会自动实例化!
至于组件里面有什么东西,就要看你的template有什么东西。
如果你在使用自定义标签时,<ms:button c="111"></ms:button> ,那么组件的VM就会多出一个c属性,值为111, 因为标签内,除了id,$id, $slot, data-*属性, ms-*属性都会自动复制到vm上。如果是一个弹出层,众所周知,弹出层都有title与content这两大区域,你又不想写在JS中,可以直接写在自定义标签,那么可以使用HTML5的插入点机制。
<ms:dialog>
<p slot="title">我是标题</p>
<div slot="content">
<iframe>许多内容</iframe>
<form>许多内容</form>
</div>
</ms:dialog>
自定义标签下的子元素如果带有slot属性,它们就转换同名的vm属性,其值是一个文档碎片,包括着刚才的p与div标签
avalon.component("ms:dialog",{
title:"",//这两个属性需要预先声明,到时会变成文档碎片
content: "",
$ready: function(vm, elem){}
//.....
})
然后你模板里面ms-html绑定,它就会自动填空到里面去。比如我们是这样定义ms:dialog组件的模板:
<div class="oni-dialog-inner">
<div class="oni-dialog-header">
<div class="oni-dialog-close" ms-click="_close" ms-if="showClose">
<i class="oni-icon oni-icon-times"></i>
</div>
<div class="oni-dialog-title">{{ title|html }}</div>
<div class="oni-dialog-content">{{content|html}}</div>
<div class="oni-dialog-footer oni-helper-clearfix">
<div class="oni-dialog-btns">
<oni:button data-button-color="success" ms-hover="oni-state-hover" ms-click="_confirm">{{confirmText}}</oni:button>
<oni:button ms-if="type =='confirm'" ms-click="_cancel">{{cancelText}}</oni:button>
</div>
</div>
</div>
</div>
有了插入点机 ,我们为组件添加大片的内容就非常简单。并且组件里面还可以有其他代表组件的自定义标签。这样一层层累积木,既直观又轻松。由于它存在严密的生命周期管理,我们也不怕如何计算父组件这样的难题了。有关组件的宽高计算,然后在$ready回调里计算,因为这时子组件肯定渲染才会执行上方父组件的$ready!
大家可以参考这里的组件源码进行学习,打造自己一套UI库。
如何做一个avalon组件的更多相关文章
- Vue+ElementUI: 手把手教你做一个audio组件
目的 本项目的目的是教你如何实现一个简单的音乐播放器(这并不难) 本项目并不是一个可以用于生产环境的element播放器,所以并没有考虑太多的兼容性问题 本项目不是ElementUI的一个音频插件,只 ...
- avalon组件
如何做一个avalon组件 在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以 ...
- 跟我一起做一个vue的小项目(八)
接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...
- VUE2.0+VUE-Router做一个图片上传预览的组件
之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...
- 手把手做一个基于vue-cli的组件库(上篇)
基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.开工. GitHub源码地址:https://github.co ...
- 手把手做一个基于vue-cli的组件库(下篇)
基于vue-cli4的ui组件库,上篇:如何做一个初步的组件.下篇:编写说明文档及页面优化.接上篇,开工. GitHub源码地址:https://github.com/sq-github/sq-ui ...
- Vue3 封装第三方组件(一)做一个合格的传声筒
各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了. 只是嘛,如果再封装一下的话,那么用起来就会更方便了. 那么如何封装呢? 封装三要素 -- 属性.插槽.事件.方 ...
- 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证
看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...
- 过年了,基于Vue做一个消息通知组件
前言 今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览 效果很简单,就是这种的小卡片似的效果. 我们先开始写UI页面,可自定义消息 ...
随机推荐
- setImageBitmap和setImageResource
同样的布局文件,小分辨率手机: 1.使用setImageBitmap设置时,出现如下现象: 2.使用setImageResource时,图片显示正常 原因: setImageResource(id) ...
- java中的static关键词
以下来自:http://www.cnblogs.com/codc-5117/archive/2011/12/04/2275298.html Static基本规则: (1)一个类 ...
- cvMat结构体详解
/* *CvMat矩阵头 */ typedef struct CvMat { int type; //数据类型,比如CV_32FC1含义是32位浮点型单通道,再比如CV_8UC3含义是8位无符号整型三 ...
- 支持向量机(SVM)基础
版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...
- The Run-Time Constant Pool The Constant Pool
http://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html#jvms-4.4 http://docs.oracle.com/javase ...
- Android之旅---广播(BroadCast)
什么是广播 在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.我们拿广播电台来做个比方.我们平常使用收音机收音是这样的:许许多多不同的广播电台通过特定的频率来发送他们 ...
- C#:org.in2bits.MyXls 文本格式日期 转换,以及设置单元格格式,保留两位小数点
org.in2bits.MyXls Excel导入日期格式的处理 表格内容为 2014-7-22 ,导入后显示为 41842 等于一个数值,根本不是日期,后来百度了一下,发现要做如下处理: stri ...
- [zz]Lessons from Pixar: Why Software Developers Should Be Storytellers
http://firstround.com/article/lessons-from-pixar-why-software-developers-should-be-story-tellers Whe ...
- xcode 5.0中,新的开发者证书加载方式
按照先前从网上看到的参考,开通了开发者账号之后,要先在本地生成一个request文件,然后上传苹果开发者网站,然后在官网上生成一个证书.cer文件,拿这个文件在本地生成p12文件,然后就是一堆鸡零狗碎 ...
- 用Visual Studio调试Windows和驱动程序
由于本人能力有限,翻译不足之处敬请谅解,欢迎批评指正:sunylat@163.com Visual Studio版本:Visual Studio 2015企业版,中文环境. MSDN原文:https: ...