Vue ジェスチャコンポーネントのチュートリアル-jsチュートリアル-php.cn

Vue ジェスチャコンポーネントのチュートリアル

Guanhui

リリース： 2020-06-13 18:17:11

転載

2469 人が閲覧しました

まえがき

最近、指でつまんだり拡大したりするジェスチャー操作が必要になり、コンポーネントをいくつか見つけたのですが、Vueに適していないものや、大きさが大きすぎるため、手書きのジェスチャーで操作することにしました。

アイデア

DOM に直接バインドする touchstart、touchmove、touchend これらのイベントをバインドする必要があるだけではありません、他のプロジェクトで再利用するのは簡単ではありません。したがって、Vue カスタム命令を使用する方が適切です。命令をプラグインにカプセル化し、npm を使用してホストすることもできるため、いつでもどこでも使用できます。

Vue カスタム命令

Vue 公式 Web サイトには、必要なキーコードを抽出したカスタム命令に関するチュートリアルがあります。

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

  }
})复制代码

ログイン後にコピー

マルチタッチ

ピンチジェスチャを実現するには複数の指で操作する必要があるため、touch のマルチタッチを使用すると、複数のタッチを取得できますコントロールポイントの位置。そして、touchstart と touchend の 2 点間の距離の偏差を判断することで、ピンチジェスチャか拡大ジェスチャかを判断できます。キーコードは次のとおりです。

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('扩大');
          }
      }
  }
})复制代码

ログイン後にコピー