asd-delegate-event
v1.0.6
Published
封装代理事件的 数据封装与获取
Downloads
1
Readme
delegate-event
封装代理事件的 数据封装与获取
Installing
Using npm:
$ npm install @analysys/delegate-event
Test
//test in browser with karma
$ npm run test
//test in node with mocha
$ npm run node-test
Build
$ npm run build
Example
create instance with config
// 示例<div id="upload"
<ul @mouseover="mousemoveHandle($event, data)" @click="clickHandle($event, data)">
<li v-for="(item, i) in data" delegate-event="mouseover,click" :dl-key="item.key">
<p delegate-event="click" :dl-index="i">click me{{i}}</p>
<span>click me{{i}}</span>
</li>
</ul>
import { getData } from '@analysys/delegate-event'
var app = new Vue({
el: '#upload',
data: {
data: [
{key:1, value:'1',other:'message1'},
{key:2, value:'2',other:'message2'},
{key:3, value:'3',other:'message3'},
{key:4, value:'4',other:'message4'}
]
},
methods: {
mousemoveHandle:function(evt){
var dt = this.data;
let data = getData(evt, dt);
console.log('mousemove event');
console.log(data);
},
clickHandle:function(evt, dt){
let data = getData(evt, dt);
// data={
// index: 0,
// data:{}
// }
console.log('click event');
console.log(data);
}
}
})
// 说明
delegate-event="eventName" ,eventName 为事件名,小写,如 click,mousemove等
dl-index 是索引值,当数组结构稳定不需要增减的时候可以用
dl-AA="BB" 模式,AA为key名,BB为对应的value值 ,会按照AA的name值 进行查找
dl-index 和 dl-AA 如果同时存在会优先dl-index。
dl-AA 仅限使用唯一值来判定,如果写多个会以第一个为准。
特殊情况处理:
当代理事件用在无传入 数据列表的时候,会返回当前节点的 所有 dl-XX的参数,
比如 <a dl-aa="1" dl-bb="2">
let data = getData(evt)
// data = {args:{
// aa:'1',
// bb:'2'
// }}
for more detail see http://git.analysys.cn/fss-modules/delegate-event/blob/master/example/index.html