Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Touch events plugin for Vue.js
This is a component wrapper for Hammer.js 2.0.
This version is only compatible with Vue 2.0.
This plugin requires Vue >= 2.0. For the Vue 1.*-compatible version, see the
1.0
branch
vue-touch
.var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})
You can pass an options object as the second argument, which at the moment accepts one property, name
. It's used to define the name of the component that is registered with Vue and defaults to 'v-touch'
.
<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>
component<!-- Renders a div element by default -->
<v-touch v-on:swipeleft="onSwipeLeft">Swipe me!</v-touch>
<!-- Render as other elements with the 'tag' prop -->
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
vue-touch supports all Hammer Events ot of the box, just bind a listener to the component with v-on
and vue-touch will setup the Hammer Manager & Recognizer for you.
|Recognizer|Events|Example|
|---|----|----|----|
|Pan|pan
, panstart
, panmove
, panend
, pancancel
, panleft
, panright
, panup
, pandown
|v-on:panstart="callback"
|
|Pinch|pinch
, pinchstart
, pinchmove
,pinchend
, pinchcancel
, pinchin
, pinchout
| v-on:pinchout="callback"
|
|Press|press
, pressup
|v-on:pressup="callback"
|
|Rotate|rotate
, rotatestart
, rotatemove
, rotateend
, rotatecancel
, |v-on:rotateend="callback"
|
|Swipe|swipe
, swipeleft
, swiperight
, swipeup
, swipedown
|v-on:swipeleft="callback"
|
|Tap|tap
|v-on:tap="callback"
|
You can use the matching *-options
props to pass Hammer options such as direction
and threshold
:
<!-- detect only horizontal pans with a threshold of 100 -->
<v-touch
v-on:panstart="onPanStart"
v-bind:pan-options="{ direction: 'horizontal', threshold: 100 }">
</v-touch>
There's one prop per Recognizer
available.
Recognizer | Prop |
---|---|
Pan | v-bind:pan-options |
Pinch | v-bind:pinch-options |
Rotate | v-bind:rotate-options |
Swipe | v-bind:swipe-options |
Tap | v-bind:tap-options |
See Hammer.js documentation for all available options for events.
In the above example, not that we used direction: 'horizontal'
. Hammer's directions interface is a little ugly (Hammer['DIRECTION_HORIZONTAL']).
VueTouch keeps that from you and accepts simple strings as directions:
const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
The component exposes a few convenience methods to enable and disable Recognizers:
Method | Explanation |
---|---|
disable(event) | disable the Recognizer for event |
enable(event) | disable the Recognizer for event |
disableAll | disable all Recognizers |
enableAll | enable all Recognizers |
isEnabled(event) | returns true if Recognizer for event is currently enabled |
<template>
<v-touch ref="tapper" @tap="callback"></v-touch>
</template>
<script>
export default {
methods: {
disableTap() {
this.$refs.tapper.disable('tap')
},
enableTap() {
this.$refs.tapper.enable('tap')
}
}
}
</script>
You can define global defaults for the builtin recognizers
// change the threshold for all swipe recognizers
VueTouch.config.swipe = {
threshold: 200
}
You can register custom events with vue-touch.
// 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
})
Warning: You have to register your custom events before installing the plugin with
Vue.use(VueTouch)
. VueTouch will log a warning to the console (in dev mode) if you try to do that afterwards, and the event will not work.
This will make it possible to listen for this event on <v-touch>
. Additionally, just like for "normal" events, you can pass further options as the corresponding prop.
<v-touch v-on:doubletap="onDoubleTap"></v-touch>
<!-- with local options -->
<v-touch v-on:doubletap="onDoubleTap" v-bind:doubletap-options="{intervall: 250}"></v-touch>
See /example
for a multi-event demo. To build it, run npm install && npm run build
.
-options
props will not change recogizer settings. The initial values will stay in place until the component is re-created.FAQs
Hammer.js based touch events plugin for Vue.js
The npm package vue-touch receives a total of 7,590 weekly downloads. As such, vue-touch popularity was classified as popular.
We found that vue-touch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.