Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs:
v-touch-hold and even
These directives also work with mouse events, not only touch events, so you are able to build cool functionality for your App on desktops too.
We will be describing
v-touch-swipe on the lines below.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
Swipe with your mouse on the area below to see it in action. If using a mouse, you need to do it quick.
If your content also has images, you might want to add
draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
Handling Mouse Events
When you want to handle mouse events too, use the
When you want to inhibit TouchSwipe, you can do so by stopping propagation of the
mousedown events from the inner content:
<div v-touch-swipe.mouse="userSwiped"> <!-- ...content --> <div @touchstart.stop @mousedown.stop> <!-- TouchSwipe will not apply here because we are calling stopPropagation() on touchstart and mousedown events --> </div> <!-- ...content --> </div>
However, if you are using
mouseCapture modifiers then events will first reach the TouchHold directive then the inner content, so TouchSwipe will still trigger.
Note on HMR
Due to performance reasons, not all of the modifiers are reactive. Some require a window/page/component refresh to get updated. Please check the API card for the modifiers which are not marked as reactive.