Quasar 触控滑动问题

Question

我有两个问题，第一个是指令没有按预期工作。

我已经抓住了只向右滑动的例子：

<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
      }
    }
  }

当我向左滑动时，我得到了这个：

我应该不能触发吧？所以想象一下我想水平滑动项目，如果我捕捉到上下事件，我会搞砸滚动，我什至不能忽略它们。

另一个问题是将其用于图像，我使用了文档中所述的 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

Answer 1

升级到上一个 RC，修复了问题。

Quasar 触控滑动问题

Quasar Touch Swipe Issues

javascript

vue.js

quasar