vue-directive-touch
v1.0.28
Published
Touch directive of vue 2.0
Downloads
2,073
Readme
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