vue 监听点击开始结束 包括长按结束监听(适用视频云台控制)

66 阅读1分钟
/**
* 长按
*/
Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    if (typeof binding.value !== 'function' && vNode.context !== undefined) {
      let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`;
      console.warn(warn);
    }
    let bool = false
    let start = (e) => {
      handler(true)
    }
    // 清除事件
    let cancel = () => {
      handler(false)
    };
    // 运行方法
    const handler = (e) => {
      if (bool === e) {
        return
      }
      bool = e
      binding.value(e);
    };

    el.addEventListener("mousedown", start);
    el.addEventListener("touchstart", start);
    el.addEventListener("click", cancel);
    el.addEventListener("mouseup", cancel);
    el.addEventListener("mouseout", cancel);
    el.addEventListener("touchend", cancel);
    el.addEventListener("touchcancel", cancel);
  }
})
 <div v-longpress="longpress">监测位置:</div>
 
 
    longpress(e){
    //e 为 true 开始控制 false 结束控制
      console.log(e);
    },