Vue自定義指令:點擊、長按

Vue自定義指令

• Gestrue.js

/**
 * Jerry
 * press 長按 參數：長按時長毫秒
 * tap 點擊事件
 */
const myGesture = {};

// eslint-disable-next-line
function gestrue(Vue, options) {
  let timeCounter = 0; // 定時器計數
  let isLong = false; // 長按標誌位

  console.log(options);
  Vue.directive('press', {
    // 當被綁定的元素插入到 DOM 中時……
    bind(el, binding, vNode) {
      let pressTime = ~~binding.arg; // 長按時長 毫秒
      if (!pressTime) { pressTime = 1000; } // 初始化默認長按時長

      console.log(pressTime);
      console.log(binding);
      // 確保提供的表達式是函數
      if (typeof binding.value !== 'function') {
        // 獲取組件名稱
        const compName = vNode.context.name;
        // 將警告傳遞給控制檯
        let error = `[longpress:] provided expression '${binding.expression}' is not a function`;
        if (compName) {
          error += `Found in component '${compName}' `;
        }
        console.error(error);
      }

      el.addEventListener('touchstart', (event) => {
        isLong = false;
        timeCounter = setTimeout(() => {
          console.log("長按事件");
          isLong = true;
          binding.value();
        }, pressTime);
      });

      el.addEventListener('touchend', (event) => {
        clearInterval(timeCounter);
      });

      // // 綁定元素
      // el.addEventListener('touchstart', function (event) {
      //   event.stopPropagation();
      //   this.startTime = Date.now();
      //   this.endTime = 0;
      //   this.timer = setTimeout(() => {
      //     if (!this.endTime || this.endTime - this.startTime >= 1000) {
      //       console.log(binding);
      //       binding.value();
      //     }
      //   }, ~~binding.arg);
      // });

      // el.addEventListener('touchend', function () {
      //   this.endTime = Date.now();
      //   if (this.timer) {
      //     window.clearTimeout(this.timer);
      //   }
      // });
    }
  });
  Vue.directive('tap', {
    // 當被綁定的元素插入到 DOM 中時……
    bind(el, binding, vNode) {
      // 確保提供的表達式是函數
      if (typeof binding.value !== 'function') {
        // 獲取組件名稱
        const compName = vNode.context.name;
        // 將警告傳遞給控制檯
        let error = `[longpress:] provided expression '${binding.expression}' is not a function`;
        if (compName) {
          error += `Found in component '${compName}' `;
        }
        console.error(error);
      }

      el.addEventListener('touchstart', (event) => {
      });

      el.addEventListener('touchend', (event) => {
        if (isLong == false) {
          console.log('點擊事件');
          binding.value();
        }
      });

      // 綁定元素
      // el.addEventListener('touchstart', function (event) {
      //   event.stopPropagation();
      //   this.startTime = Date.now();
      //   this.endTime = 0;
      // });

      // el.addEventListener('touchend', function () {
      //   this.endTime = Date.now();
      //   if (this.endTime - this.startTime < 500) {
      //     binding.value()
      //   }
      // });
    }
  });
}

myGesture.install = gestrue;

export { myGesture };

• main.js

import { myGesture } from './views/80401/Gesture';
Vue.use(myGesture);

• 引用

v-press:1000="showDeleteButton(index)" 
v-tap="clearLoop(index)"