Vue自定义长按指令

最新推荐文章于 2025-05-07 17:49:45 发布

墨青岩

最新推荐文章于 2025-05-07 17:49:45 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：组件封装前端案例分享文章标签： vue.js 长按指令前端 typescript

文章由Marco个人原创，转载请注明出处！

本文链接：https://blog.csdn.net/Marco_hui/article/details/139742144

新建文件longpress.ts文件

// longpress.ts
import {
   
    DirectiveBinding } from 'vue'
const longpress = {
   
   
  beforeMount(el: any, binding: DirectiveBinding) {
   
   
    const cb = binding.value
    const duration = binding.arg || 800  // 长按等待时间

    let timer: number | null = null
    let isLongPress = false  // 记录是否触发长按

    const longPress = (e: TouchEvent) => {
   
   
      if (e.type === 'touchstart') {
   
   
        timer = window.setTimeout(() => {
   
   
          isLongPress = true
          if (typeof cb === 'function') cb(el) // 3. 回调函数
        }, +duration)
        return false
      } else if (e.type === 'touchmove') {
   
   
        if