Vue.jsで画像をクリックするとプレビュー画像になる
2807 回閲覧されました
画面の画像をクリックするとプレビュー画像が表示されるのをVue.jsで実装する方法について解説します。
画面の画像をクリックすると大きなプレビュー画像になり「次へ」のボタンをクリックすると「画像1、画像2、画像3、画像4、画像5」 と切り替わっていき「画像5」の次は「画像1」に戻ります。
「前へ」のボタンをクリックすると前の画像に戻っていきます。
「閉じる」のボタンをクリックするとプレビュー画像が終了します。
デモは↓です。
それでは解説しますが今回はresetcssを使うので↓のデータをダウンロードして使ってください。
画像1〜画像5までを表示
コードを↓にします。
これで↓の表示になります。
v-forディレクティブ（11行目）で画像5枚を表示しています。
v-forディレクティブの使い方については↓の解説を読んでください。
11行目のindexは画像のインデックス番号（最初は0）ですがv-forディレクティブを使うときにこれはなくてもいいです。
ない場合のコードは↓になります。
今回はインデックス番号を後で使うのでつけています。
注意点として今回はhtmlファイルにvue.jsのコードを書いている場合は今回の書き方でいいですがターミナル（コマンドプロンプト）でvue.jsのプロジェクトを作ってv-forディレクティブを書いた場合はコードは↓になり「:key=”index”」をつけないとエラーになるので注意してください。
画像をクリックした時プレビュー画像の表示
コードを↓にします。
これで↓になります。（今の状態では閉じるボタンがないのでプレビュー画像を消すには画面リロードをしないといけません）
プレビュー画像を表示するのはv-ifディレクティブを使います。
14行目のv-ifディレクティブの条件を「fullImage」としてこれの最初の状態をfalse（59行目）にしてtrue になったときにプレビュー画像を表示させます。
画面の画像をクリックした時にプレビュー画像を表示するのでv-onディレクティブを31行目に付けています。（@click=”imageClick(index)”のこと）
その際にどの画像をクリックしたかを@clickに伝えないといけないので引数にindexを使っています。（indexは26行目のindexのことです）
imageClick(index)の中身は66行目〜69行目にあります。
画面の画像をクリックした時にプレビュー画像を表示しないといけないのでv-ifの条件のfullImageをtrueにします。（68行目）
これでプレビュー画面になるのですが画像がまだ表示されないのでimageClickの引数のindexを使ってプレビュー画像を表示します。
まずプレビュー画像を表示するための仮のインデックス番号を設定しますが60行目の「currentImageIndex」です。（値が-1になっていますが何でもいいです）
画面の画像のインデックス番号をプレビュー画像のインデックス番号と同じにしないといけないので67行目があります。
そしてプレビュー画像を表示するためにcomputed（71行目）を使います。
computedとmethodsの使い分けで悩むと思いますが解説しています。
73行目の「this.images[this.currentImageIndex]」ですが42行目〜58行目の中の画像の中のthis.currentImageIndex番目という意味です。
72行目の「currentImageUrl」を18行目のcurrentImageUrlで使っています。
18行目のcurrentImageUrl.srcですがが42行目のimagesの中のcurrentImageUrl番目のsrcという意味です。
これでプレビュー画像の表示ができました。
プレビュー画像を表示しているときの「次へ」、「前へ」、「閉じる」ボタンの実装
コードを↓にします。
プレビュー画像を表示したときに「前へ」、「次へ」、「閉じる」ボタンを実装するので11行目のv-ifディレクティブの中に「前へ」、「次へ」、「閉じる」ボタンのコードを書きます。
22行目、27行目、32行目ですがボタンをクリックした時なのでv-onディレクティブを使います。
まずは閉じるボタンです。
32行目の「close」の中身ですが98行目〜100行目です。
ボタンを押したときにプレビュー画面がなくなればいいのでプレビュー画面を表示するための条件「fullImage」（11行目）をfalseにすればいいです。
次は「前へ」ボタンです。
22行目の「prev」の中身ですが92行目〜97行目です。
「前へ」ボタンを押すたびにプレビュー画像を表示するインデックス番号（107行目のthis.currentImageIndex）が1ずつ減ればいいので93行目があります。
画像のインデックス番号は最初が0ですがインデックス番号を減らしていって0より小さくなったら画像を表示するインデックス番号がなくなるのでエラーになります。
そうならない様にインデックス番号が0より小さくなったらインデックス番号を4（最後の画像のインデックス番号）にするために94行目〜96行目があります。
95行目の「this.images.length – 1」ですがこれがインデックス番号の4を表していますがthis.images.length – 1を使うのではなく4 でもいいです。
コードにすると↓です。
最後は「次へ」ボタンです。
27行目の「next」の中身ですが85行目〜91行目です。
「次へ」ボタンを押すたびにプレビュー画像を表示するインデックス番号（107行目のthis.currentImageIndex）が1ずつ増えればいいので86行目があります。
画像のインデックス番号は最後が4 ですが4を超えると表示する画像がなくなってエラーになります。
そうならない様にインデックス番号が4より大きくなったらインデックス番号を0（最初の画像のインデックス）にするために87行目〜89行目があります。
87行目の「this.images.length」ですが57行目〜73行目の画像の個数という意味でコードを↓にしてもいいです。
これで完成です。