Vue 제스처 구성 요소 튜토리얼

머리말

최근에 손가락 집기 및 확장 제스처 작업을 사용해야 했는데 여러 구성 요소를 찾았지만 Vue에 적합하지 않거나 크기가 너무 커서 직접 필기 제스처 작업을 사용하기로 결정했습니다.

Idea

touchstart, touchmove, touchend를 DOM에 직접 바인딩해야 할 뿐만 아니라 이러한 이벤트도 바인딩해야 합니다. 다른 프로젝트에서도 사용됩니다. 프로젝트를 재사용하기가 쉽지 않습니다. 따라서 Vue 사용자 정의 명령어를 사용하는 것이 더 적절합니다. 명령어는 플러그인으로 캡슐화한 다음 npm을 사용하여 호스팅할 수 있으므로 언제 어디서나 사용할 수 있습니다. touchstart 、touchmove、touchend 不仅要绑定这几个事件，而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适，指令还可以封装成插件，再使用 npm 托管，这样随时随地都可以使用了。

Vue 自定义指令

Vue 官网就有 自定义指令 的教程，摘取我们需要的关键代码。

Vue.directive('pinch', {  // 只调用一次，指令第一次绑定到元素时调用
  bind (el, binding)  {    // el：指令所绑定的元素，可以用来直接操作 DOM
    // binding.value()：运行添加到指令的回调方法

  }
})复制代码

多点触控

实现捏合手势，必然是多根手指操作，因此使用 touch 的多点触控，就可以拿到多个触控点的位置了。再通过判断两点 touchstart 与 touchend

Vue 사용자 정의 지침

Vue 공식 웹사이트에는 필요한 키 코드를 추출하는 사용자 정의 지침에 대한 튜토리얼이 있습니다.

let touchFlag = false;let touchInitSpacing = 0;let touchNowSpacing = 0;

el.addEventListener('touchstart',(e)=>{    if(e.touches.length>1){
        touchFlag = true;
        touchInitSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }else{
        touchFlag = false;
    }
});

                
el.addEventListener('touchmove',(e)=>{    if(e.touches.length>1&&touchFlag){
        touchNowSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }
});

el.addEventListener('touchend',()=>{    if(touchFlag){
        touchFlag = false;        if(touchInitSpacing-touchNowSpacing>0){
            binding.value('pinchin');
        }else{
            binding.value('pinchout');
        }
    }
});复制代码

멀티 터치

<template>
    <p class="pinch" v-pinch="pinchCtrl"></p></template>复制代码

로그인 후 복사

new Vue({  methods: {      pinchCtrl: function (e) {        
          if(e==='pinchin'){              console.log('捏合')
          }          if(e==='pinchout'){              console.log('扩大');
          }
      }
  }
})复制代码

로그인 후 복사

npm i vue-pinch --save复制代码

로그인 후 복사

rrreee추가 구성 요소

위 내용은 Vue 제스처 구성 요소 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!