【Nuxt.js】vue-touch-eventsでタッチイベントを使おう

前置き

vue2-touch-events

タップ、スワイプ、タッチホールドイベントを
Vue, Nuxtで、そしてPCでも
簡単に使えるようにするものです💫

スワイプしたらページ遷移、
とかが超簡単にできます💕

参考:
Nuxt.js/Vue.jsでもスワイプでページ移動したい

インストール

terminal

$ npm i vue2-touch-events

使い方

準備

基本的にグローバルに使うと思うので
plugins配下にjsファイルを作成し、
nuxt.config.jsで読み込みます。

import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

import Vue from 'vue'

import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

export default {
  plugins: [
    '~/plugins/touch.js',
  ],
}

export default {

plugins: [

'~/plugins/touch.js',

}

ローカルで使用する場合は
scriptに入れます。

<template>
  <div class="page">
  </div>
</template>

<script>
import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

export default {
}
</script>

</div>

</template>

import Vue from 'vue'

import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

export default {

}

</script>

実際の使用

あとはv-touch:tapなどの
ディレクティブを使用するだけです💫

<template>
  <div class="page">
    <p v-touch:tap="touchHandler">Tap Me</p>
    <p v-touch:swipe.left="swipeHandler">Swipe Me</p>
    <p v-touch:longtap="longtapHandler">Long Tap Me</p>
  </div>
</template>

<script>


export default {
  methods: {
    touchHandler () {
      alert('Hello!')
    },
    swipeHandler () {
      this.$router.push('/left')
    },
    longtapHandler () {
      console.log('long tap')
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

<p v-touch:swipe.left="swipeHandler">Swipe Me</p>

</div>

</template>

export default {

methods: {

touchHandler () {

alert('Hello!')

swipeHandler () {

this.$router.push('/left')

longtapHandler () {

console.log('long tap')

}

</script>

.page {

}

</style>

スワイプでqueryを指定して
表示を切り替えるのも面白いかもしれません💡
サンプルコードは単純に指定してるだけですが
過去の記事でqueryでモーダルを切り替える、
といったことをしていました。
スワイプしたらモーダル切り替えとかあっても良さそう。
【Nuxt.js】Modal実践編：QueryでModalを管理する①

<template>
  <div class="page">
    <p v-touch:swipe.left="swipeHandler">Swipe Me</p>
    {{ $route.query }}
  </div>
</template>

<script>


export default {
  methods: {
    swipeHandler () {
      this.$router.push({ name: 'products', query: { productId: 123 } })
    },
  }
}
</script>

<p v-touch:swipe.left="swipeHandler">Swipe Me</p>

</div>

</template>

export default {

methods: {

swipeHandler () {

this.$router.push({ name: 'products', query: { productId: 123 } })

}

</script>

まとめ

1からタッチイベントを書くのは大変そうですが、
これならディレクティブなので
Vue, Nuxtに慣れてきた方ならすごく簡単ですよね…！

ちなみに、
カルーセルスライダーにしたい場合は
これでスワイプを使ったりするよりも、
Hooperなど特化したものを使用した方が良さそうです💡

そしてライブラリなど一切使用せずに
ファッション画像をスワイプで見れるようにしている
なんて記事もありました👀
1からやりたい方には参考になりそうです✨
Vue.js+touchイベントで一から作るスマホ用スワイプ機能