useLongPress

useLongPress 用于在长按某个元素时触发回调函数

基础用法

<template>
  <div>longPressed{{ longPressed ? "true" : "false" }}</div>
  <div>Click count {{ clickCount }}</div>
  <button ref="buttonRef">Click or Long Press Me</button>
  <button
    @click="
      () => {
        longPressed = false;
      }
    "
  >
    Rest
  </button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useLongPress } from "hooks-vue3";
const longPressed = ref<boolean>(false);
const buttonRef = ref(null);
const clickCount = ref(0);
useLongPress(
  () => {
    longPressed.value = true;
  },
  buttonRef,
  {
    delay: 1000,
    onClick() {
      clickCount.value++;
    },
  }
);
</script>

API

useLongPress(() => void,target,{delay: 1000});

参数

type Target<T> = T | (() => T) | Ref<T>;

interface UseLongPressOptions {
  delay?: number;
  onClick?: (event: PointerEvent) => void;
}

function useLongPress<T extends Element>(
  handler: (evt: PointerEvent) => void,
  target: Target<T | null>,
  options: UseLongPressOptions = {},
): void