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. SVN中Commit出现乱码的解决方案【转载】

    http://blog.csdn.net/thinkingcao/article/details/52797737 这几天在电脑上装了一个SVN,把Eclipse里面的工程全部Delete掉了,然后在 ...

  2. 死锁-Java代码示例

    class MyThread implements Runnable{ private Object o1 = new Object(); private Object o2 = new Object ...

  3. linux基础命令2(ls,cd)

    ls:显示文件内的文件和目录 文件的类型: -普通文件 d目录文件(directory) l链接文件(symbolic link file) c 字符设备文件(char) b 块设备文件(block) ...

  4. JAVA 扫雷 程序

    文件列表 2.主程序入口 3.1部分源代码 package MineSweeper; import java.awt.BorderLayout; import java.awt.Font; impor ...

  5. Kings(状压DP)

    Description 用字符矩阵来表示一个8x8的棋盘,'.'表示是空格,'P'表示人质,'K'表示骑士.每一步,骑士可以移动到他周围的8个方格中的任意一格.如果你移动到的格子中有人质(即'P'), ...

  6. 15.6,redis主从同步

    redis主从同步 原理:1. 从服务器向主服务器发送 SYNC 命令.2. 接到 SYNC 命令的主服务器会调用BGSAVE 命令,创建一个 RDB 文件,并使用缓冲区记录接下来执行的所有写命令.3 ...

  7. 关于代码通过API操作阿里云RDS的巨坑

    由于项目原因,要通过API操作阿里云的数据库,于是简单研究了一下阿里云提供的相关文档,发现官方提供了.NET的SDK,而且还提供了github开源代码,这个要为阿里点赞! 于是到github上弄了一份 ...

  8. 利用jsoup抓取网页图片

    jsoup简介 jsoup is a Java library for working with real-world HTML. It provides a very convenient API ...

  9. Ubuntu16.04安装openCV的问题集合

    Q1 下列软件包有未满足的依赖关系:   libtiff4-dev : 依赖: libjpeg-dev  E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系. 上网查了 ...

  10. 仅需几行代码 轻松实现ETH代币空投

    仅需几行代码 轻松实现ETH代币空投 批量发送以太坊,部署下面的合约,然后往下面的合约打币,就可以分发 ragma solidity ^0.4.21; contract batchTransfer { ...