Vue 2.0 移动设备指令 ( Vue touch directive )
轻量级 Vue 2.0 移动触摸事件自定义指令;
预设 tap up right down left long 触摸操作类型;
完整支持 self once prevent capture stop 事件修饰符;
自定义指令方法传参最佳实例;
资源合理释放;
安装:
- ES6
npm install vue-directive-touch --save;
;Vue;
- 直接引入:
使用 How to use:
常规
绑定事件 <!-- 包含修饰符 -->绑定事件
el: "dom" methods : { //事件方法 } ;
传参
el: "dom" methods : /* 自定义指令方法: 附带参数 */ { return { /* * event 为事件实例 * start end 分别包含事件起始信息: X --> 横坐标 | Y --> 纵坐标 | T --> 时间戳 * index、item 为方法传参 */ } } /* 自定义指令方法: 无传参 */ { /* * event 为事件实例 * start end 分别包含事件起始信息: X --> 横坐标 | Y --> 纵坐标 | T --> 时间戳 * index、item 为方法传参 */ } /* 原生 Vue 事件方法 */ { /* * event 为事件实例 * index、item 为方法传参 */ } ;
事件类型:
单击: v-touch:tap
长按: v-touch:long
左滑: v-touch:left
右滑: v-touch:right
上滑: v-touch:up
下滑: v-touch:down
事件修饰符
官方文档
事件修饰符释义参照 Vue Vue 1.0 与 2.0 自定义指令开发的差异:
Vue 2.0 版本自定义指令 API 相比 1.0 全部更改,在自定义指令开发层面完全不兼容,使用层面主要差异为:"自定义指令方法的传参"
例:
在 Vue 1.0 中可以实现以下自定义指令
v-touch="fun($index,param)"
Vue 2.0 的指令机制会直接将其解析为 expression,也就是自定义指令中的 fun($index,param) 会被直接执行,传递到生命周期中的值是 fun($index,param) 执行的结果;
Vue 2.0 相关机制更改的原因引用文档中的解释:" 有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令",另外一个层面,也可以保持指令传递方法逻辑处理的统一;
License
MIT