template-MP/directives/index.js

/**
 * 自定义指令入口文件
 */

// 防止重复点击指令
export const preventReClick = {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      if (el.disabled) return
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
      }, binding.value || 1000)
    })
  },
}

// 长按指令
export const longPress = {
  mounted(el, binding) {
    let timer = null
    let startTime = 0
    const handler = binding.value
    const duration = binding.arg || 1000

    // 取消定时器
    const cancel = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
    }

    // 开始计时
    const start = () => {
      startTime = Date.now()
      timer = setTimeout(() => {
        handler(el)
      }, duration)
    }

    // 绑定事件
    el.addEventListener('touchstart', start)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
}

// 权限控制指令
export const permission = {
  mounted(el, binding) {
    const { value } = binding
    const permissions = uni.getStorageSync('permissions') || []

    if (value && !permissions.includes(value)) {
      // 隐藏元素
      el.style.display = 'none'
      el.__vue__ && (el.__vue__.isDisplay = false)
    }
  },
  updated(el, binding) {
    const { value } = binding
    const permissions = uni.getStorageSync('permissions') || []

    if (value && !permissions.includes(value)) {
      // 隐藏元素
      el.style.display = 'none'
      el.__vue__ && (el.__vue__.isDisplay = false)
    } else {
      // 显示元素
      el.style.display = ''
      el.__vue__ && (el.__vue__.isDisplay = true)
    }
  },
}

// 拖拽指令
export const drag = {
  mounted(el) {
    let startX = 0
    let startY = 0
    let initialX = 0
    let initialY = 0
    let isDragging = false

    // 获取元素初始位置
    const getInitialPosition = () => {
      const rect = el.getBoundingClientRect()
      initialX = rect.left
      initialY = rect.top
    }

    // 鼠标按下事件
    const handleMouseDown = e => {
      isDragging = true
      startX = e.clientX
      startY = e.clientY
      getInitialPosition()
      el.style.position = 'absolute'
      el.style.left = initialX + 'px'
      el.style.top = initialY + 'px'
      el.style.zIndex = 9999
    }

    // 鼠标移动事件
    const handleMouseMove = e => {
      if (!isDragging) return
      const dx = e.clientX - startX
      const dy = e.clientY - startY
      el.style.left = initialX + dx + 'px'
      el.style.top = initialY + dy + 'px'
    }

    // 鼠标松开事件
    const handleMouseUp = () => {
      isDragging = false
    }

    // 绑定事件
    el.addEventListener('mousedown', handleMouseDown)
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)

    // 在元素上存储事件处理函数，以便在指令解绑时移除
    el._dragHandlers = {
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
    }
  },
  unmounted(el) {
    // 移除事件监听器
    if (el._dragHandlers) {
      const { handleMouseDown, handleMouseMove, handleMouseUp } = el._dragHandlers
      el.removeEventListener('mousedown', handleMouseDown)
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
      delete el._dragHandlers
    }
  },
}