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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-1cn

前置き

vue2-touch-events

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

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

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

インストール

// terminal
$ npm i  vue2-touch-events

使い方

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

plugins/touch.js

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

Vue.use(Vue2TouchEvents)

nuxt.config.js

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

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

index.vue

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

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

Vue.use(Vue2TouchEvents)

export default {
}
</script>

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

index.vue

<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>

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

index.vue

<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>

まとめ

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

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1cn