vue之自定义指令移动端长按

vue之自定义指令移动端长按

新建自定义指令directive.js文件

import Vue from 'vue'
import { debounce } from '@/utils'


Vue.directive('debounce', {
  inserted(el, binding) {
    if (!binding.value.handler || typeof binding.value.handler !== 'function') {
      return
    }
    const handler = binding.value.handler
    const wait = binding.value.await || 1000
    const immediate = !!binding.value.immediate
    const event = binding.value.event || 'input'
    el.addEventListener(event, debounce(handler, wait, immediate))
  }
})

Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    // 确保提供的表达式是函数
    if (typeof binding.value.fn !== 'function') {
      // 获取组件名称
      const compName = vNode.context.name
      // 将警告传递给控制台
      let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `
      if (compName) { warn += `Found in component '${compName}' ` }
      console.warn(warn)
    }

    // 定义变量
    let pressTimer = null

    // 定义函数处理程序
    // 创建计时器（ 1秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' || e.type === 'mousedown') {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          // 执行函数
          handler()
        }, 500)
      }
    }

    // 取消计时器
    let cancel = (e) => {
      // 检查计时器是否有值
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }

    // 运行函数
    const handler = (e) => {
      // 执行传递给指令的方法
      binding.value.fn(...binding.value.args)
    }

    // 添加事件监听器
    el.addEventListener("mousedown", start)
    el.addEventListener("touchstart", start)
    // 取消计时器
    el.addEventListener("click", cancel)
    el.addEventListener("mouseout", cancel)
    el.addEventListener("touchend", cancel)
    el.addEventListener("touchcancel", cancel)
  }
})

/**
 * @desc  防抖
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(method, wait, immediate) {
  let timeout
  return function (...args) {
    let context = this
    if (timeout) {
      clearTimeout(timeout)
    }
    // 立即执行需要两个条件，一是immediate为true，二是timeout未被赋值或被置为null
    if (immediate) {
      // 如果定时器不存在，则立即执行，并设置一个定时器，wait毫秒后将定时器置为null
      // 这样确保立即执行后wait毫秒内不会被再次触发
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        method.apply(context, args)
      }
    } else {
      // 如果immediate为false，则函数wait毫秒后执行
      timeout = setTimeout(() => {
        // args是一个类数组对象，所以使用fn.apply
        // 也可写作method.call(context, ...args)
        method.apply(context, args)
      }, wait)
    }
  }
}

main.js中引入使用

import '@/utils/directive' // 全局自定义指令

以上仅为项目中记录