Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet.
This is a directive wrapper for Hammer.js 2.0.
This branch is only compatible with Vue 1.0. For the Vue 2.0 compatible rewrite, see the
next
branch
Available through npm as vue-touch
.
var VueTouch = require('vue-touch')
Vue.use(VueTouch)
<script>
tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global VueTouch
.v-touch
directive<a v-touch:tap="onTap">Tap me!</a>
<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>
There are two ways to customize recognizer options such as direction
and threshold
. The first one is setting global options:
// change the threshold for all swipe recognizers
VueTouch.config.swipe = {
threshold: 200
}
Or, you can use the v-touch-options
directive to configure the behavior on a specific element:
<!-- detect only horizontal pans with a threshold of 100 -->
<a
v-touch:pan="onPan"
v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
</a>
// example registering a custom doubletap event.
// the `type` indicates the base recognizer to use from Hammer
// all other options are Hammer recognizer options.
VueTouch.registerCustomEvent('doubletap', {
type: 'tap',
taps: 2
})
<a v-touch:doubletap="onDoubleTap"></a>
See Hammer.js documentation for all available events.
See /example
for a multi-event demo. To build it, run npm install && npm run build
.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型