🖼️

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

2022/07/28に公開約2,300字

概要

大変お久しぶりです!
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

手順

  1. まずは普通にライブラリを追加しますん
    yarn add vue-easy-lightbox@next
    
  2. vueファイルにimportしてコンポーネント登録
    hoge.vue
    <script>
     import { ref } from 'vue'
     import VueEasyLightbox from 'vue-easy-lightbox'
    
     export default {
       components: {
         VueEasyLightbox
       },
    
  3. 画像配列生成(公式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);
      }
    
  4. ライブラリ用各定義
    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()
      }
      
      // ...
    
  5. いろいろ返す
    hoge.vue
    setup(props) {
      // ...手順3, 4が入る...
      
      return {
        visibleRef,
        indexRef,
        imgsRef,
        showMultiple,
        onHide,
      };
    }
    
  6. 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

ログインするとコメントできます