From d0878ccffec1c793257d8a7632b40aeebe4f0a7c Mon Sep 17 00:00:00 2001 From: Your Name <27681135@qq.com> Date: Wed, 23 Oct 2019 11:17:00 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=BA=E9=95=BF=E6=8C=89=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E4=BA=86=E9=BB=98=E8=AE=A4=E8=B0=83=E7=94=A8=E6=8C=87?= =?UTF-8?q?=E4=BB=A4=E6=96=B9=E6=B3=95=E4=B8=BA=E5=AF=B9=E8=B1=A1=E5=BD=A2?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 58 +++++++++------- src/App.vue | 83 +++++++++++----------- src/index.js | 193 +++++++++++++++++++++------------------------------ src/main.js | 6 +- 4 files changed, 157 insertions(+), 183 deletions(-) diff --git a/README.md b/README.md index 373ded2..7f8e8e6 100644 --- a/README.md +++ b/README.md @@ -14,36 +14,42 @@ import vueTouch from 'kim-vue-touch' Vue.use(vueTouch) ``` -* kim-vue-touch提供了点击、长按、左滑、右滑、上滑、下滑等事件， -* 当你不需要传参时可以通过v-tap="vueTouch"的形式调用方法， -* 当你需要传参时v-tap="(e)=>vueTouch('点击',e)"的方式调用，e是event对象 -* 当指令搭配v-for使用时，一定要确保key值的唯一性，否则不能保证数据刷新之后事件被重新绑定（参考vue就地复用机制） -* 尽量避免对数组、对象的直接赋值操作，可能会导致参数不更新 + +- kim-vue-touch 提供了点击、长按、左滑、右滑、上滑、下滑等事件， +- 指令 v-touchall='touchOption' +- touchOption 可分别配置启用哪些操作（如点击、长按、滑动,及其回调函数），以及长按延时，见 demo +- 当指令搭配 v-for 使用时，一定要确保 key 值的唯一性，否则不能保证数据刷新之后事件被重新绑定（参考 vue 就地复用机制） +- 尽量避免对数组、对象的直接赋值操作，可能会导致参数不更新 ``` -``` \ No newline at end of file +``` diff --git a/src/App.vue b/src/App.vue index ad491b5..19b7af4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,53 +1,56 @@ \ No newline at end of file diff --git a/src/index.js b/src/index.js index c856dfa..3e55405 100644 --- a/src/index.js +++ b/src/index.js @@ -1,116 +1,81 @@ -function vueTouch(el,binding,type,vnode){ - this.obj=el; - this.binding=binding; - this.touchType=type; - this.vueTouches={x:0,y:0}; - this.vueMoves=true; - this.vueLeave=true; - this.longTouch=true; - this.vueCallBack=binding.value; - this.obj.addEventListener("touchstart",(e)=>{ - this.start(e); - },false); - this.obj.addEventListener("touchend",(e)=>{ - this.end(e); - },false); - this.obj.addEventListener("touchmove",(e)=>{ - this.move(e); - },false); - // vnode.key = this.randomString() - -}; -vueTouch.prototype={ - start:function(e){ - this.vueMoves=true; - this.vueLeave=true; - this.longTouch=true; - this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}; - this.time=setTimeout(function(){ - if(this.vueLeave&&this.vueMoves){ - this.touchType=="longtap"&&this.vueCallBack(); - this.longTouch=false; - }; - }.bind(this),1000); - }, - end:function(e){ - var disX=e.changedTouches[0].pageX-this.vueTouches.x; - var disY=e.changedTouches[0].pageY-this.vueTouches.y; - clearTimeout(this.time); - if(Math.abs(disX)>10||Math.abs(disY)>100){ - this.touchType=="swipe"&&this.vueCallBack(e); - if(Math.abs(disX)>Math.abs(disY)){ - if(disX>10){ - this.touchType=="swiperight"&&this.vueCallBack(e); - }; - if(disX<-10){ - this.touchType=="swipeleft"&&this.vueCallBack(e); - }; - }else{ - if(disY>10){ - this.touchType=="swipedown"&&this.vueCallBack(e); - }; - if(disY<-10){ - this.touchType=="swipeup"&&this.vueCallBack(e); - }; - }; - }else{ - if(this.longTouch&&this.vueMoves){ - this.touchType=="tap"&&this.vueCallBack(e); - this.vueLeave=false - }; - }; - }, - move:function(e){ - this.vueMoves=false; - }, - randomString:function(){ - var len = 10; - 　　 var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; - 　　 var maxPos = $chars.length; - 　　 var pwd = ''; - 　　 for (var i = 0; i < len; i++) { - pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); - 　　 } - 　　 return pwd; - } -}; +function vueTouch(el, binding) { + this.activeMetheds = binding.value + this.delay = binding.value.longtapDelay ? binding.value.longtapDelay : 1000 + this.obj = el + this.binding = binding + this.vueTouches = { x: 0, y: 0 } -export default { - install: function (Vue, options) { - Vue.directive("tap",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"tap",vnode); - } - }); - Vue.directive("swipe",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"swipe",vnode); - } - }); - Vue.directive("swipeleft",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"swipeleft",vnode); - } - }); - Vue.directive("swiperight",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"swiperight",vnode); - } - }); - Vue.directive("swipedown",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"swipedown",vnode); - } - }); - Vue.directive("swipeup",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"swipeup",vnode); - } - }); - Vue.directive("longtap",{ - bind:function(el,binding,vnode){ - new vueTouch(el,binding,"longtap",vnode); - } - }); + this.ifTouchStandby = true + this.callbacks = {} + + this.obj.addEventListener( + 'touchstart', + e => { + this.start(e) + }, + false + ) + this.obj.addEventListener( + 'touchend', + e => { + this.end(e) + }, + false + ) +} + +vueTouch.prototype = { + start: function(e) { + this.ifTouchStandby = true + this.vueTouches = { + x: e.changedTouches[0].pageX, + y: e.changedTouches[0].pageY } -} \ No newline at end of file + if (this.activeMetheds.longtap) { + this.time = setTimeout( + function() { + if (this.ifTouchStandby) { + this.activeMetheds.longtap() + this.ifTouchStandby = false + } + }.bind(this), + this.delay + ) + } + }, + end: function(e) { + var disX = e.changedTouches[0].pageX - this.vueTouches.x + var disY = e.changedTouches[0].pageY - this.vueTouches.y + if (this.time) clearTimeout(this.time) + if (this.ifTouchStandby) { + if (Math.abs(disX) > 10 || Math.abs(disY) > 10) { + if (Math.abs(disX) > Math.abs(disY)) { + if (disX > 10 && this.activeMetheds.swiperight) { + this.activeMetheds.swiperight() + } + if (disX < -10 && this.activeMetheds.swipeleft) { + this.activeMetheds.swipeleft() + } + } else { + if (disY > 10 && this.activeMetheds.swipedown) { + this.activeMetheds.swipedown() + } + if (disY < -10 && this.activeMetheds.swipeup) { + this.activeMetheds.swipeup() + } + } + } else if (this.activeMetheds.tap) { + this.activeMetheds.tap() + } + } + } +} +export default { + install: function(Vue, options) { + Vue.directive('touchall', { + bind: function(el, binding) { + new vueTouch(el, binding) + } + }) + } +} diff --git a/src/main.js b/src/main.js index fedae44..1fbe29c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import Vue from 'vue/dist/vue.js' import App from './App.vue' -import touch from 'kim-vue-touch' -// import touch from './index' +// import touch from 'kim-vue-touch' +import touch from './index' // import touch from '../dist/index' Vue.config.productionTip = false @@ -11,4 +11,4 @@ new Vue({ el: '#app', components: { App }, template: '' -}) \ No newline at end of file +}) From 40821c3acb88e3cac271d0a0045ca554bd9b2bee Mon Sep 17 00:00:00 2001 From: Your Name <27681135@qq.com> Date: Wed, 23 Oct 2019 14:59:40 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=8C=E5=87=BB?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 5 +++-- src/index.js | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index 19b7af4..7250d1d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,13 +12,14 @@ export default { text: "touch", touchOption: { tap: e => this.vueTouch("点击", e), + doubletap: e => this.vueTouch("双击", e), longtap: e => this.vueTouch("长按", e), swipeleft: e => this.vueTouch("左滑", e), swiperight: e => this.vueTouch("右滑", e), swipeup: e => this.vueTouch("上滑", e), swipedown: e => this.vueTouch("下滑", e), - - longtapDelay: 500 + doubletapDelay: 300, + longtapDelay: 600 } }; }, diff --git a/src/index.js b/src/index.js index 3e55405..d06bf9c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,18 @@ function vueTouch(el, binding) { this.activeMetheds = binding.value this.delay = binding.value.longtapDelay ? binding.value.longtapDelay : 1000 + this.doubleDelay = binding.value.doubletapDelay + ? binding.value.doubletapDelay + : 300 + this.obj = el this.binding = binding this.vueTouches = { x: 0, y: 0 } this.ifTouchStandby = true this.callbacks = {} - + this.lastClickTime = null + this.timeOneClick = null this.obj.addEventListener( 'touchstart', e => { @@ -48,6 +53,8 @@ vueTouch.prototype = { var disY = e.changedTouches[0].pageY - this.vueTouches.y if (this.time) clearTimeout(this.time) if (this.ifTouchStandby) { + if (this.activeMetheds.doubletap) { + } if (Math.abs(disX) > 10 || Math.abs(disY) > 10) { if (Math.abs(disX) > Math.abs(disY)) { if (disX > 10 && this.activeMetheds.swiperight) { @@ -65,7 +72,36 @@ vueTouch.prototype = { } } } else if (this.activeMetheds.tap) { - this.activeMetheds.tap() + if (!this.activeMetheds.doubletap) { + this.activeMetheds.tap() + } else { + if (!this.timeOneClick) { + this.timeOneClick = setTimeout( + function() { + this.activeMetheds.tap() + }.bind(this), + this.doubleDelay + ) + } + + if (this.lastClickTime) { + let twice = Date.now() + if (twice - this.lastClickTime < this.doubleDelay) { + this.activeMetheds.doubletap() + if (this.timeOneClick) clearTimeout(this.timeOneClick) + } else { + this.lastClickTime = Date.now() + this.timeOneClick = setTimeout( + function() { + this.activeMetheds.tap() + }.bind(this), + this.doubleDelay + ) + } + } else { + this.lastClickTime = Date.now() + } + } } } }