如何在Vue 3中使向右滑动手势向左向后滑动

Question

我对滑动操作以及在浏览器中处理这些类型的移动式手势很陌生。我目前正在使用 vueuse 库中名为 useSwipe< 的可组合项/code> 创建一种“向右滑动以显示按钮，向左滑动以隐藏按钮”的东西。

下面您将看到适用于向右滑动但无法弄清楚如何向左滑动的代码。为了快速了解我试图实现的目标，请从 vue2 swiper 库中查看此演示 -> 实现所需结果的库演示

<script setup>
const target = ref(null)
const container = ref(null)
const containerWidth = computed(() => container.value?.offsetWidth)
const left = ref('0')

const { isSwiping, lengthX } = useSwipe(target, {
  passive: false,
  onSwipe() {
    if (containerWidth.value) {
      if (lengthX.value < 0) {
        const length = Math.abs(lengthX.value)
        left.value = `${length}px`
      } else {
        left.value = '0'
      }
    }
  },
  onSwipeEnd() {
    if (
      lengthX.value < 0 &&
      containerWidth.value &&
      Math.abs(lengthX.value) / containerWidth.value >= 0.5
    ) {
      left.value = '50%'
    } else {
      left.value = '0'
    }
  }
})
</script>

<template>
<div class="relative flex items-center h-full w-full overflow-hidden p-10 border-b border-b-neutral-200" ref="container">

  // here's the two buttons that will be shown when swiping right

  <div class="flex h-full absolute top-0 left-0">
    <div class="flex justify-center items-center space-x-2 bg-alert w-36 py-7 px-3">
      <p class="uppercase text-white">delete</p>
      <i-outline-trash class="text-white"></i-outline-trash>
    </div>
    <div class="flex justify-center items-center space-x-2 bg-warn w-36 py-7 px-3">
      <p class="uppercase text-white">edit</p>
      <i-outline-pencil-alt class="text-white"></i-outline-pencil-alt>
    </div>
  </div>

  // the part to be swiped right then left

  <div class="flex w-full h-full bg-white space-x-5 absolute p-5 top-0 left-0 z-20" ref="target" :class="{ &quot;transition-all ease-in-out duration-500&quot;: !isSwiping }" :style="{ left }">
    <div class="space-y-2">
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
      <div class="w-[6px] h-[6px] rounded-full bg-neutral-200"></div>
    </div>
    <div>1</div>
    <div class="w-full h-full">
      <div class="flex justify-between mb-1">
        <h3>item<span class="ml-2 text-neutral-contrast-light">(variant)</span></h3>
        <p>{{ itemPrice }}</p>
      </div>
      <div class="flex justify-between text-xs">
        <p>+ name</p>
        <p>price</p>
      </div>
    </div>
  </div>
</div>
</template>