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 = "eventFunWithParam(index,item)"
		v-touch:tap = "eventFunNoParam"
		@click = "orginalFun(index,item,$event)"
	>
	</li>
</ul>

 new Vue({
	el: "dom",
	methods : {
	    /* 自定义指令方法: 附带参数 */
		eventFunWithParam : function(index,item) {
			return function(event, start, end) {
			    /*
			    *   event 为事件实例
			    *   start end 分别包含事件起始信息： X  --> 横坐标 | Y --> 纵坐标 | T --> 时间戳 
			    *   index、item 为方法传参
			    */
			    
			}
		},
		/* 自定义指令方法： 无传参 */
                eventFunNoParam : function(event, start, end) {
                      /*
                        *   event 为事件实例
                        *   start end 分别包含事件起始信息： X  --> 横坐标 | Y --> 纵坐标 | T --> 时间戳 
                        *   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