プラグイン、モジュール

【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で読み込みます。

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


実際の使用

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


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


まとめ

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

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

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

-プラグイン、モジュール
-,

© 2021 aLiz Nuxt