vue2.0 v-tap简洁(漏)版 (只解决300ms问题)
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);
}
})
<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问题)的更多相关文章
- vue2.0版cnode社区项目搭建及实战开发
_________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- 基于vue2.0+vuex+localStorage开发的本地记事本
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
随机推荐
- (转)IDE 而言,是 Xcode 的技术比较先进还是 Visual Studio?
李如一他们弄得那个IT公论,最近有一期是吐槽ObjC的.吐到最后, @涛 吴 说,理想的用户界面语言应该是界面的描述和逻辑分开的,想了半天举不出例子来,其实说的不就是WPF吗?还在用Interface ...
- 无法打开物理文件 XXX.mdf“,操作系统错误 5:”5(拒绝访问。)"的解决办法
http://blog.csdn.net/blackfield/article/details/6550499 用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf&qu ...
- 3.4.2 Undefined类型【JavaScript高级程序设计第三版】
Undefined 类型只有一个值,即特殊的 undefined.在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined,例如: var message; alert(me ...
- python中的文件操作小结2
''' #-----------文件修改---------- f=open("test_1",'r',encoding="utf-8") f2=open(&qu ...
- iOS常用控件-UIScrollView
一. 常见属性 @property (nonatomic) CGPoint contentOffset; //记录UIScrollView滚动的位置 @pro ...
- 我理解中的Hadoop HDFS分布式文件系统
一,什么是分布式文件系统,分布式文件系统能干什么 在学习一个文件系统时,首先我先想到的是,学习它能为我们提供什么样的服务,它的价值在哪里,为什么要去学它.以这样的方式去理解它之后在日后的深入学习中才能 ...
- 对于STM32别名区的理解 (转载)
1. 什么是位段.位带别名区? 2. 它有什么好处? 答1: 是这样的,记得MCS51吗? MCS51就是有位操作,以一位(BIT)为数据对象的操作, MCS51可以简单的将P1口的第2位 ...
- Java继承的缺点
转载自:https://www.cnblogs.com/xz816111/archive/2018/05/24/9080173.html JAVA中使用到继承就会有两个无法回避的缺点: 1.打破了封装 ...
- 《Cracking the Coding Interview》——第1章:数组和字符串——题目1
2014-03-18 01:25 题目:给定一个字符串,判断其中是否有重复字母. 解法:对于可能有n种字符的字符集,用一个长度为n的数组统计每个字符的出现次数,大于1则表示有重复. 代码: // 1. ...
- [转]个人对AutoResetEvent和ManualResetEvent的理解
仅个人见解,不对之处请指正,谢谢. 一.作用 AutoResetEvent和ManualResetEvent可用于控制线程暂停或继续,拥有重要的三个方法:WaitOne.Set和Reset. 这三个方 ...