vue----封装长按指令

封装全局长按指令

Vue.directive('longpress', {
  bind: function(el, binding, vNode) {
　　//el为长按对象（事件源）
　　//binding 事件处理函数
 
      // 确保提供的表达式是函数，如果不是，将警告传给控制台
      if (typeof binding.value !== 'function') {
          // 获取组件名称
          const compName = vNode.context.name;
          // 将警告传递给控制台
          let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
          if (compName) { warn += `Found in component '${compName}' `}
 
          console.warn(warn);
      }
 
      // 定义变量，计时器清空
      let pressTimer = null;
 
      // 定义函数处理程序start
      // 创建计时器（ 1秒后执行函数 ）
      let start = (e) => {
 　　　　　　//判断事件是否为click，e.button=0，则为左键，如果是click事件，或者不是按的左键（右键有默认行为），则直接return
          if (e.type === 'click' && e.button !== 0) {
              return;
          }
 　　　　　　//判断计时器是否为空
          if (pressTimer === null) {
              pressTimer = setTimeout(() => {
                  // 执行事件处理函数
                  handler();
              }, 1000)
          }
      }
 
      // 取消计时器
      let cancel = (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);
  }

使用全局长按指令

 

template>
    <div class="double">
        <!-- 长按触发incrementPlusTen函数，点击触发incrementPlusOne函数 -->
        <button v-longpress="incrementPlusTen" @click="incrementPlusOne">点击我啦</button>
 
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            value: 10
        }
    },
    methods: {
        // 增加1
        incrementPlusOne() {
            // this.value++
            console.log("我是点击事件");
 
        },
        // 增加10
        incrementPlusTen() {
            // this.value += 10
            console.log("我是长按事件");
        }
    }
   
 
}
</script>
 
<style scoped lang="scss">
 
 
</style>