【发布时间】:2021-06-19 11:24:31
【问题描述】:
我有两个问题,第一个是指令没有按预期工作。
我已经抓住了只向右滑动的例子:
<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
}
}
}
当我向左滑动时,我得到了这个:
我应该不能触发这个吧?所以想象一下我想水平滑动项目,如果我捕捉到 up 和 down 事件,我会弄乱滚动,我什至不能忽略它们。
另一个问题是将它与图像一起使用,我使用了文档中所述的 draggable="false" ,它不会触发滑动。示例:
<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>
我无法在 jsfiddle 上重现这个:
https://jsfiddle.net/andrempcosta/17d6uctw/1/
文档:https://next.quasar.dev/vue-directives/touch-swipe#introduction
【问题讨论】:
标签: javascript vue.js quasar