Quasar Touch卷帘问题

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，修复了这个问题。