點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Vue Cool LightBox 放大圖片

Sam Xiao's Avatar 2021-04-15

LightBox 類 Package 原本都用來對一堆圖片 Slideshow，但也可只用在單一圖片放大顯示。

Version

Vue 2.6.11
Vue Cool LightBox 2.4.1

Vue Cool LightBox

lightbox000

原本為一張小圖。

lightbox001

點擊圖片後會放大顯示，且 cursor 會顯示放大鏡，按下圖片可繼續放大。

lightbox002

放大後可再拖曳下方 zoombar 繼續放大。

Add Vue Cool LightBox

$ yarn add vue-cool-lightbox

使用 Yarn 安裝 vue-cool-lightbox。

Main

main.js

import Vue from 'vue'
import App from './App.vue'
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

Vue.use(CoolLightBox)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

第 3 行

import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

引用 vue-cool-lightbox 與其所提供的 vue-cool-lightbox.min.css。

第 6 行

Vue.use(CoolLightBox)

Vue 使用 CoolLightBox。

Component

App.vue

<template>
  <div>
    <cool-light-box :items="items" :index="index" useZoomBar overlayColor="rgba(0,0,0,.3)" @close="index = null"></cool-light-box>
    <img :src="base64" width="100" @click="onClick">
  </div>
</template>

<script>
let onClick = function() {
  this.items = [this.base64]
  this.index = 0
}

export default {
  name: 'App',
  data: () => ({
    base64: '',
    items: [],
    index: null
  }),
  methods: {
    onClick
  }
}
</script>

第 3 行

<cool-light-box :items="items" :index="index" useZoomBar overlayColor="rgba(0,0,0,.3)" @close="index = null"></cool-light-box>

在 HTML template 內使用 LightBox。

  • items：提供圖片 Array，可以是 url、檔名或 Base64 String
  • index：目前所要顯示的圖片 Array 的 index
  • useZoomBar：下方顯示 zoombar
  • overlayColor：設定 background color 與其 opacity
  • @close：當 close event 時會將 index 設定為 null，這是 official example 提供寫法

第 4 行

<img :src="base64" width="100" @click="onClick">

實際顯示的小圖。

16 行

data: () => ({
  base64: '',
  items: [],
  index: null
}),

items 與 index 為 LightBox 所依賴的 model，因此必須提供，至於 base64 則不一定需要，若 Base64 String 來自於 API，稍後直接新增至 item model 即可。

第 9 行

let onClick = function() {
  this.items = [this.base64]
  this.index = 0
}

將 Base64 String 包進 Array 指定給 items model，由於 index model 初始值為 null，結束也會清為 null，要顯示時必須重新設定為 0 才會觸發 LightBox 顯示。

Conclusion

  • LightBox 多用於多張圖片 slideshow，因此 items property 設計成 Array，且要指定 index property 觸發 LightBox 顯示，而結束 LightBox 則將 index property 清為 null 即可，因此要重新設定為 0 再次觸發 LightBox
  • 因為目前只有一張圖片，因此將 Base64 String 使用 [] 包成新 Array 指定給 items model 即可，這是使用單張圖片比較 tricky 之處
  • 照片美女為 中森明菜，依髮型推測應該是 1983 年照片

Reference

Vue Cool LightBox, Basic Example

# Vue