🖼️

vue-easy-lightboxをvue3系で使ってみた

2022/07/29に公開

Rails

Vue.js

3系

tech

概要

大変お久しぶりです！
5月半ばから別サービスの委託(こちらも基本Railsやってます。フロントはNuxt, Reactどちらもあるが触るのは恐れ多い・・)を始めましてなかなかプライベートの時間確保するのが難しいと感じているMittonです（単なる言い訳）。

今回もvue3でのお話になります。
画像クリックで画像拡大機能（プレビュー機能?）を実装したくvue-easy-lightboxなるものが3系にも対応していたようなので使ってみた次第です。
それではどうぞ！

バージョン情報

ツール	バージョン
node	14.7.0
vue	3.2.20
rails/webpacker	4.3.0
Rails	6.1.4
Ruby	3.0.2

手順

まずは普通にライブラリを追加しますん
```
yarn add vue-easy-lightbox@next
```

vueファイルにimportしてコンポーネント登録

hoge.vue

<script>
 import { ref } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'

 export default {
   components: {
     VueEasyLightbox
   },

画像配列生成（公式docはベタ書きだったがサービス上メッセージに付属している画像で生成したかった）

hoge.vue

setup(props) {
  // NOTE: 画像配列生成
  const messageImageAry = new Array
  for (let message of props.messages) {
    if (条件1 && 条件2) messageImageAry.push(message.file1.url);
    if (条件1 && 条件2) messageImageAry.push(message.file2.url);
  }

ライブラリ用各定義

hoge.vue

setup(props) {

  // ...手順3が入る...

  // NOTE: VueEasyLightbox用
  const visibleRef = ref(false)
  const indexRef   = ref(0)
  const imgsRef    = ref([])
  let   index      = ref(0)

  const onShow = () => { visibleRef.value = true }
  const onHide = () => { visibleRef.value = false }
  const showMultiple = (src) => {
    imgsRef.value  = messageImageAry
    // 引数から呼び出す画像のindexを確認している
    index          = imgsRef.value.indexOf(src)
    indexRef.value = index
    onShow()
  }
  
  // ...

いろいろ返す

hoge.vue

setup(props) {
  // ...手順3, 4が入る...
  
  return {
    visibleRef,
    indexRef,
    imgsRef,
    showMultiple,
    onHide,
  };
}

template側で呼び出し

hoge.vue

// 実際には子コンポーネントの画像要素から呼び出しているが割愛
<img v-if="条件" @click="ShowMultiple(message.file1.url)" :src="`${message.file1.url}`" alt="" class="message-img">

// プレビューのコンポーネント
// こちらはhoge.vueに置いてる
<VueEasyLightbox
  :visible="visibleRef"
  :imgs="imgsRef"
  :index="indexRef"
  @hide="onHide"
></VueEasyLightbox>

コラム

いかがでしたでしょうか？

vue3系に対応している信頼度の高いライブラリはまだまだ少ない・・？
こちらのライブラリも入れるか迷ったのですがものは試しということで入れてみました笑

少しでもどなたかの役にたててるとよいなぁ〜。
質問等あればドシドシ送ってくださいませ！

今回はこの辺にて、、

概要

バージョン情報

手順

コラム

Discussion