ホームページ > ウェブフロントエンド > jsチュートリアル > Vue ジェスチャ コンポーネントのチュートリアル

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

Guanhui
リリース: 2020-06-13 18:17:11
転載
2431 人が閲覧しました

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

まえがき

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

アイデア

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

Vue カスタム命令

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

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

  }
})复制代码
ログイン後にコピー

マルチタッチ

ピンチジェスチャを実現するには複数の指で操作する必要があるため、touch のマルチタッチを使用すると、複数のタッチを取得できますコントロールポイントの位置。そして、touchstarttouchend の 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('扩大');
          }
      }
  }
})复制代码
ログイン後にコピー

概要

Vue カスタム命令を使用してジェスチャ操作を完了するのは複雑ではありません。同時に、ロジックをコンポーネントにカプセル化することは非常に軽量です。

コンポーネントのソース コード

完全なソース コードを表示するには、ここをクリックしてください。

このコンポーネントを使用する

このコンポーネントが役立つ場合は、npm を通じてインストールできます:

npm i vue-pinch --save复制代码
ログイン後にコピー

その他のコンポーネント

create-picture: Thisこのコンポーネントは、キャンバス画像描画機能とテキスト描画機能を提供し、同期構文を使用して非同期描画を完了し、ネイティブ キャンバス描画構文を簡素化します。

推奨チュートリアル: 「JS チュートリアル

以上がVue ジェスチャ コンポーネントのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート