はじめに
この記事はNuxt3×Hooperでカスタムページャを作ってみた備忘録をまとめた記事です。
注意書き
HooperとはVueライクなスライダーで、軽量かつ直感的に扱えることが魅力なライブラリです。
Nuxt2ではお世話になっていましたが、現在は公式の更新が途絶え、Vue3用として出回っているものは有志の方によってフォークされ展開されたものになります。
for Vue2のHooperで作ったカスタムページャをfor Vue3で作るとこんな感じになるという遊び半分な内容になっています。
Hooperでカスタムページャを作ろうと思ったきっかけ
Hooperのデフォルトで用意されているページャはスライドの数に応じてシンプルなdivを展開するというものです。
やりたいことはページャをサムネイル化して利用させることだったのですが、サムネイル表示のページャを作ろうとしてもデフォルトのコンポーネントではどうにもならなかったため、関数を駆使して作ることにしました。
サンプルコード
サンプルコードでやってること
※ Vueの基本的な構文（v-for）などは割愛します。
<Hooper>
- refで要素を取得し、動的に制御できるようにする
- v-modelで双方向バインディングを実装する
- Hooperが用意している
@slideイベントをつけることで、スライド発火時に今何番目のページがアクティブかという情報をカレントスライドとして渡す
<div class="custom-pager">
- カスタムページャにあたる部分
- クリックイベント発火時にインデックス番号をカレントスライドとして渡す
watch
- カレントスライドの値を監視し、更新されたらHooperが用意している
slideTo関数を使ってスライドを更新する
goToSlide, updateCarousel
- 前述の
@slideイベントとslideTo関数の中身 -
currentSlide.value = hogehogeのように、予め定義したカレントスライドの値を更新しているだけ（あとはwatchが良い感じにしてくれるため）
カスタムをしてみての感想
処理の概要としては以上です。
サンプルコードでは割愛していますが、元の要件では配列データとして渡されるメインのスライドと同じ画像をサムネイルとして表示させるようにしなければならず、デフォルトのページャコンポーネントだとstyle側との調整がどうにもこうにも上手くいかず、それならばページャをカスタマイズしてしまえというところから始まりました。
当初は魔改造しなければならないのかなと震えていましたが、終わってみると用意されたイベントと関数を駆使することで落ち着いたので良かったなと思っています。
公式のドキュメントを読み込んで、用意してもらっているものを使ってやりたいことを実現する楽しさがありました。
おわりに
このドキュメントが誰かの参考になれば幸いです。
ご拝読いただきありがとうございました。