1分でできるVue.js vue2-hammerのスワイプ・タップイベント実装

vue2-hammerとは

Hammer.jsというスワイプやタップイベントの実装が簡単にできるライブラリのVue.js版。

vue2-hammerの使い方

まず適当なディレクトリでVueのプロジェクトを作成。

# default, npmを選択
$ vue create my-hammer

インストールが完了したらcd my-hammerでディレクトリに移動後、下記のコマンドでvue2-hammerをインストール。

npm install vue2-hammer

vue2-hammerのインストールが完了したらmain.jsにimportとVue.useを追記して読み込む。

import Vue from 'vue'
import App from './App.vue'
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

あとはApp.jsなどにtap, press, swipeなどのイベントを下記のように記述すればイベントが使用可能となる。

<template>
  <div id="app"
    v-hammer:tap="onTap"
    v-hammer:press="onPress"
    v-hammer:swipe="onSwipe"
  >
    <h1>{{ events }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      events: 'events',
      dict: {
        2: 'left',
        4: 'right',
        8: 'top',
        16: 'bottom',
      }
    }
  },
  methods: {
    onTap() {
      this.events = 'Tap'
    },
    onPress() {
      this.events = 'Press'
    },
    onSwipe(e) {
      this.events = 'swipe ' + this.dict[e.direction]
    },
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Vue.js vue2-hammerのサンプル

pressはロングタップに該当する。tapやswipeイベントの追加といってもPCブラウザでもクリックやドラッグでもイベントが発火する。

スマートフォンのみで動作させたい場合はユーザーエージェントで分岐してイベントを発火させよう。

swipe.leftやswipe.rightなどの共存不可

複数方向を検出させるにはサンプルのように引数のdirectionの2, 4, 8, 16の数値から方向を判定する必要がある。

swipeに対して下記のようにleftやrightを複数指定することはできない。

v-hammer:swipe.top="onSwipeTop"
v-hammer:swipe.right="onSwipeRight"
v-hammer:swipe.bottom="onSwipeBottom"
v-hammer:swipe.left="onSwipeLeft"