asd-delegate-event

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