Fetch the repository succeeded.
Vue-Gesture is a simple Vue.js gesture events plugin. It runs now under Vue.js 2, which comes from a fork, to see here: https://github.com/bees4ever/vue2-gesture. The old version for Vue.js 1 is not longer available. See the example for how to use this plugin, simply it's now a component and not a directive anymore. There are a bunches of arguments you can use, i.e. tap, swipe, touchstart etc. When you are in the use of the PC，"tap, longtap, touchstart" will automatically be converted to "click".
The updated version is available through npm as vue2-gesture. So simply run npm install vue2-gesture. Then you can use it as follows:
// You may use:
window.Vue = Vue;
var VueGesture = require('vue2-gesture')
Vue.use(VueGesture)
You can also directly include it with a <script> tag when you have Vue already included globally. It will automatically install itself, and will add a global vueGesture.
vue-gesture componentWARNING: You may have to use <vue2-gesture> if you installed the npm version
You can add a single event with the type parameter or you add a set of events with the types parameter which is
a javascript array.
<vue-gesture :type="'touchstart'" :call="handleComponent.bind(this,'touchstart')" >touchstart</vue-gesture>
<vue-gesture :type="'touchmove'" :call="handleComponent.bind(this,'touchmove')" ><i>touchmove</i></vue-gesture>
<vue-gesture :type="'touchend'" :call="handleComponent.bind(this,'touchend')" >touchend</vue-gesture>
<vue-gesture :type="'doubletap'" :call="handleComponent.bind(this,'doubletap')">doubleTap</vue-gesture>
<vue-gesture :type="'tap'" :call="handleComponent.bind(this,'tap')">tap</vue-gesture>
<vue-gesture :type="'longTap'" :call="handleComponent.bind(this,'longTap')">longTap</vue-gesture>
<vue-gesture :type="'swipe'" :call="handleComponent.bind(this,'swipe')">swipe</vue-gesture>
<vue-gesture :type="'swipeLeft'" :call="handleComponent.bind(this,'swipeLeft')">swipeLeft</vue-gesture>
<vue-gesture :type="'swipeRight'" :call="handleComponent.bind(this,'swipeRight')">swipeRight</vue-gesture>
<vue-gesture :type="'swipeUp'" :call="handleComponent.bind(this,'swipeUp')">swipeUp</vue-gesture>
<vue-gesture :type="'swipeDown'" :call="handleComponent.bind(this,'swipeDown')">swipeDown</vue-gesture>
<vue-gesture :type="'click'" :call="handleComponent.bind(this,'click')">click</vue-gesture>
<vue-gesture :types="['swipeDown','click']" :call="handleComponent.bind(this,'EVENT')" >swipeDown and click</vue-gesture>
Where handleComponent is a method in your Vue.js web-application. handleComponent should understand this two parameters:
handleComponent: function(str,e){
// str is the second input, like 'longTap', 'touchmove',
// there you can pass some information to the handler
// e is the element itself, you may use it or not
var html = e.srcElement.innerHTML;
e.srcElement.innerHTML=html+" "+str;
console.log(str);
}
A simpler way to handle vue-gesture events have been provided by @sjoerdloeve and uses this syntax:
<vue-gesture :type="'tap'" :call="() => { changeProperty = true}" >tap</vue-gesture>
Where the type, of course, is changeable.
There are two ways to customize recognizer options such as direction and threshold. The first one is setting global options:
// change the config
vueGesture.config = {
maxSingleTapTimeInterval: 200
}
See /example for a multi-event demo. To build it, run npm install && npm run build.
MIT
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手