vue 移动端点击事件_vue自定义指令--移动端网页长按事件-CSDN博客

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

vue自定义指令官方文档自定义指令 — Vue.js

1. 自定义长按指令 longTouch.js

const on = (function() {
  if (document.addEventListener) {
    return function(element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false)
      }
    }
  } else {
    return function(element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler)
      }
    }
  }
})()

function touchstart(e, el) {
  let touches = e.touches[0]
  let tapObj = el.tapObj
  tapObj.pageX = touches.pageX
  tapObj.pageY = touches.pageY
  tapObj.clientX = touches.clientX
  tapObj.clientY = touches.clientY
  el.time = +new Date()
}
function touchend(e, el) {
  let touches = e.changedTouches[0]
  let tapObj = el.tapObj
  el.time = +new Date() - el.time
  el.endTime = ''
  tapObj.distanceX = tapObj.pageX - touches.pageX
  tapObj.distanceY = tapObj.pageY - touches.pageY
  let isLongTap = el.time > 500 && Math.abs(tapObj.distanceX) < 10 && Math.abs(tapObj.distanceY) < 10
  if (!isLongTap || el.endTime) return
  el.documentHandler(e)
}

export default {
  bind(el, binding, vnode) {
    on(el, 'touchstart', e => {
      touchstart(e, el)
    })
    on(el, 'touchend', e => {
      touchend(e, el)
    })
    el.tapObj = {}
    el.bindingFn = binding.value
    el.documentHandler = function(e) {
      el.bindingFn(el)
    }
  },
  update(el, binding, vnode) {
  },
  unbind(el) {
  }
}

2. 组件元素绑定指令 demo.vue

<template>
  <div>
    <span v-longTouch="handleLongTouch">长按复制该文本哦</span>
  </div>
</template>


<script>

import {copy} from '@/utils/stringUtils'
import longTouch from '@/utils/longTouch'

export default {
  directives: { longTouch },
  methods: {
    handleLongTouch(el) {
      copy(el) // 自定义复制文本的方法
    }
  }

</script>