Vue使用自定义指令实现按钮长按提示功能，超简单！

项目场景

点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件

实现思路

• 首先，需要创建一个计时器，在2 秒后开始执行函数，用户按下按钮时触发 mousedown 事件，开始计时；
• 当鼠标移开按钮时开始调用 mouseout事件
• 第一种情况，当 mouseup 事件 2 秒内被触发了，需要清除计时器，相当于进行了普通的点击事件
• 第二种情况，当计时器没有在 2 秒内清除，那么这就可以判定为一次长按，可以执行长按的逻辑了。
• 如果在移动端使用，使用的就是 touchstart，touchend 事件了

实现效果

实现代码

<template>
  <div>
  	 <div class="btn-copy"><el-button v-press="handleClickLong">长按</el-button></div>
  </div>
</template>

<script>
import press from '../../directive/test/press'
export default {
  directives: {
    press
  },
  data(){
    return{
    }
  },
  methods:{
    handleClickLong () {
      alert('实现了长按哦！！！')
    },
  }
}
</script>

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

press.js文件如下：

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
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, 2000)
      }
    }
    // 取消计时器
    let cancel = (e) => {
      console.log(e)
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(e)
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

export default press

如有疑问，欢迎评论区留言。