I'm facing two issues, the first being that the directives are not functioning as expected.
For example, I've implemented a swipe only to the right:
<div class="q-pa-md row justify-center">
<q-card
v-touch-swipe.mouse.right="handleSwipe"
class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
style="min-height: 200px; min-width: 300px"
>
<div v-if="info" class="custom-info">
<pre>{{ info }}</pre>
</div>
<div v-else>
Swipe to right only
<q-icon name="arrow_forward" />
</div>
</q-card>
</div>
setup() {
const info = ref(null)
return {
info,
handleSwipe({evt, ...newInfo}) {
info.value = newInfo
}
}
}
When I swipe left, unexpected things happen:
This disrupts my horizontal scrolling experience. How can I prevent this from happening?
The second issue arises when using the directive with images. Despite setting draggable="false" according to the documentation, the swipe does not trigger. Here's an example:
<div
v-touch-swipe.horizontal="handleSwipe"
class="flex row cursor-pointer"
@click="$router.push({
name: 'productDetails',
params: {
id: product.id
}
})"
>
<q-img
:src="imageSource"
:draggable="false"
placeholder-src="~assets/placeholder.png"
@dragstart.prevent
loading="lazy"
spinner-color="primary"
:srcset="sourceSet"
sizes="(max-width: 400px) 400w,
(min-width: 400px) and (max-width: 800px) 800w,
(min-width: 800px) and (max-width: 1200px) 1200w,
(min-width: 1200px) 1600w"
/>
</div>
I tried reproducing this on jsfiddle without success:
https://jsfiddle.net/andrempcosta/17d6uctw/1/
Refer to docs for more information: