Vue.directive('tap',{
bind:function(el,binding){
var startTx, startTy, endTx, endTy, startTime, endTime; el.addEventListener("touchstart",function(e){
var touch=e.touches[0];
startTx = touch.clientX;
startTy = touch.clientY;
startTime = +new Date()
},false ); el.addEventListener("touchend",function(e){
endTime = +new Date()
if (endTime - startTime > 300) {
// 若点击事件过长,不执行回调
return
}
var touch = e.changedTouches[0];
endTx = touch.clientX;
endTy = touch.clientY;
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6){
// 若点击期间手机移动距离过长,不执行回调
var method = binding.value.method;
var params = binding.value.params;
method(params);
}
},false);
}
})
使用方法:在创建Vue实例前引入,栗子:
<div id="test"  v-tap="{method:test,params:some}">

var vm= new Vue({
el:"#test",
data:{
some:"ok!"
},
method:{
test:function(ee){
console.log(ee)
}
}
})

vue2.0 v-tap简洁(漏)版 (只解决300ms问题)的更多相关文章

  1. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  2. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  3. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  4. vue2.0做移动端开发用到的相关插件和经验总结

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  5. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  6. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  7. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  8. 基于vue2.0+vuex+localStorage开发的本地记事本

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...

  9. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

随机推荐

  1. php集成开发环境xampp的搭建

    一:运维闲谈 作为一名linux运维工程师,在确保能够有熟练的服务器的搭建和维护优化技能的前提,还需对自身解决问题方法上做出一番功夫. 如何为自己的运维工作添砖加瓦,自动化运维便变得非常重要,一方面, ...

  2. &、|、~与&&、||、! 谬误

    按位运算符(&.|.~)的操作是被默认为一个二进制的位序列,分别对其中的每个位进行操作. 逻辑运算符(&&.||.!)将操作数当成非真及假,非假及真.通常就是将0当成假,非0即 ...

  3. Matplotlib 图表的基本参数设置

    1.图名,图例,轴标签,轴边界,轴刻度,轴刻度标签 # 图名,图例,轴标签,轴边界,轴刻度,轴刻度标签等 df = pd.DataFrame(np.random.rand(10,2),columns= ...

  4. ClassNotFountException 与 NoClassDefineError

    一 知识准备 NoClassDefFoundError:正如它们的名字所说明的是一个错误 (Error),而ClassNotFoundException是一个异常.正如上一章节所说Exception和 ...

  5. WPF仿酷狗页面

    原文:WPF仿酷狗页面 版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net/u013981 ...

  6. 通过Aspose.Word和ZXING生成复杂的WORD表格

    1.前言 这是我之前做的一个项目中要求的功能模块,它的需求是生成一个WORD文档,需要每页一个表格并且表格中需要插入文字.条形码和二维码等信息,页数可控制.具体的效果如下图所示: 可以看到有以下几点是 ...

  7. java中封装的概念

    封装(Encapsulation)是类的三大特性之一, 就是将类的状态信息隐藏在类的内部,不允许外部程序直接访问, 而是通过该类提供的方法来实现对隐藏信息的操作和访问. 简而言之,就是隐藏内部实现,提 ...

  8. mysql一机多实例安装记录

    因为想研究mycat,所以需要安装多个mysql实例进行研究.限于没有多于计算机,只能在本机安装了.通过mysql文档,自己琢磨着安装成功! 目录结构如下: 其中one和two文件夹用来模拟数据库分库 ...

  9. [译]17-spring基于java代码的配置元数据

    spring还支持基于java代码的配置元数据.不过这种方式不太常用,但是还有一些人使用.所以还是很有必要介绍一下. spring基于java代码的配置元数据,可以通过@Configuration注解 ...

  10. 【转载】Unity3D研究院之IOS自定义游戏摇杆与飞机平滑的移动

    移动开发游戏中使用到的触摸游戏摇杆在iPhone上是非常普遍的,毕竟是全触摸屏手机,今天MOMO 通过一个小例子和大家讨论Unity3D 中如何自定义一个漂亮的全触摸游戏摇杆.        值得高兴 ...