<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend" class="div">按鈕</div>

export default {
  data() {
    return {}
  },
  methods: {
    // 手指按下事件
    gotouchstart() {
      window.isClick = true
      clearTimeout(this.timeOut)
      this.timeOut = setTimeout(function() {
        console.log('在這里執(zhí)行長(zhǎng)按事件')
        window.isClick = false
      }, 500)
    },
    //手釋放，如果在500毫秒內(nèi)就釋放，則取消長(zhǎng)按事件，此時(shí)可以執(zhí)行onclick應(yīng)該執(zhí)行的事件
    gotouchend() {
 
      if (window.isClick) {
        console.log('在這里執(zhí)行點(diǎn)擊事件')
      }
    //如果手指有移動(dòng)，則取消所有事件，此時(shí)說明用戶只是要移動(dòng)而不是長(zhǎng)按
    gotouchmove() {
      console.log('手指移動(dòng)了')
      window.isClick = false
    }
  // 項(xiàng)目銷毀前清除定時(shí)器
  beforeDestroy() {
    clearTimeout(this.timeOut)
  }
}

 -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

<template>
  <div>
  	 <div class="btn-copy"><el-button v-press="handleClickLong">長(zhǎng)按</el-button></div>
  </div>
</template>

<script>
import press from '../../directive/test/press'
export default {
  directives: {
    press
  },
  data(){
    return{
    }
  },
  methods:{
    handleClickLong () {
      alert('實(shí)現(xiàn)了長(zhǎng)按哦?。。?)
    },
  }
}
</script>

<style lang="scss">
</style>

const press = {
  bind: function (el, binding, vNode) {
    console.log(el, binding, vNode)
    // el就是dom
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    // 定義變量
    let pressTimer = null
    // 創(chuàng)建計(jì)時(shí)器（ 2秒后執(zhí)行函數(shù) ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, 2000)
      }
    }
    // 取消計(jì)時(shí)器
    let cancel = (e) => {
      console.log(e)
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 運(yùn)行函數(shù)
    const handler = (e) => {
      binding.value(e)
    }
    // 添加事件監(jiān)聽器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消計(jì)時(shí)器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 當(dāng)傳進(jìn)來的值更新的時(shí)候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default press