yorkie / vue-directive-touch

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; 

import touch from 'vue-directive-touch';
Vue.use(touch);

• 直接引入:

<script src="./vue.js"></script>
<script src="./dist/index.js"></script>

使用 How to use:

常规

<p v-touch:tap="eventFun">绑定事件</p>

<!-- 包含修饰符 -->
<p v-touch:tap.self.once.prevent.capture.stop="eventFun">绑定事件</p>

new Vue({
	el: "dom",
	methods : {
		eventFun : function() {
			//事件方法
		}
	}
});

传参

<ul>
	<li 
	    v-for = "(item,index) in list"
		v-touch:tap = "eventFun(index,item)"
		@click = "orginalFun(index,item,$event)"
	>
	</li>
</ul>

new Vue({
	el: "dom",
	methods : {
	    /* 自定义指令方法 */
		eventFun : function(index,item) {
			return function(event) {
			    /*
			    *   event 为事件实例
			    *   index、item 为方法传参
			    */
			    
			}
		},
		/* 原生 Vue 事件方法 */
		orginalFun : function(index,item,event) {
		    /*
            *   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