Vue.js 3 Tutorial to Build Image Lightbox Editor with vue-easy-lightbox Library in TypeScript

App.vue

<template>
  <div>
    <button @click="showSingle">Show Single Picture</button>
    <button @click="showMultiple">Show Multiple Pictures</button>

    <vue-easy-lightbox
      :visible="visibleRef"
      :imgs="imgsRef"
      :index="indexRef"
      @hide="onHide"
    />
  </div>
</template>

<script>
import VueEasyLightbox from 'vue-easy-lightbox'
import { ref, defineComponent } from 'vue'
import img1 from './assets/1.jpeg'
import img2 from './assets/2.jpeg'
export default defineComponent({
  components: {
    VueEasyLightbox
  },
  setup() {
    const visibleRef = ref(false)
    const indexRef = ref(0)
    const imgsRef = ref([])
    const onShow = () => {
      visibleRef.value = true
    }
    const showSingle = () => {
      imgsRef.value = 'https://via.placeholder.com/350x150'
      onShow()
    }
    const showMultiple = () => {
      imgsRef.value = [
        img1,
        img2
      ]
      indexRef.value = 0 // Starting image
      onShow()
    }
    const onHide = () => {
      visibleRef.value = false
    }
    return {
      visibleRef,
      indexRef,
      imgsRef,
      showSingle,
      showMultiple,
      onHide
    }
  }
})
</script>

<style scoped>
button {
  margin: 10px;
}
</style>

<div>

<button @click="showSingle">Show Single Picture</button>

<button @click="showMultiple">Show Multiple Pictures</button>

<vue-easy-lightbox

:visible="visibleRef"

:imgs="imgsRef"

:index="indexRef"

@hide="onHide"

</div>

</template>

import VueEasyLightbox from 'vue-easy-lightbox'

import { ref, defineComponent } from 'vue'

import img1 from './assets/1.jpeg'

import img2 from './assets/2.jpeg'

export default defineComponent({

components: {

VueEasyLightbox

setup() {

const visibleRef = ref(false)

const indexRef = ref(0)

const imgsRef = ref([])

const onShow = () => {

visibleRef.value = true

}

const showSingle = () => {

imgsRef.value = 'https://via.placeholder.com/350x150'

onShow()

}

const showMultiple = () => {

imgsRef.value = [

img1,

img2

]

indexRef.value = 0 // Starting image

onShow()

}

const onHide = () => {

visibleRef.value = false

}

return {

visibleRef,

indexRef,

imgsRef,

showSingle,

showMultiple,

onHide

}

})

</script>

button {

margin: 10px;

}

</style>

Vue.js 3 Tutorial to Build Image Lightbox Editor with vue-easy-lightbox Library in TypeScript

Comments

Leave a Reply Cancel reply

Archives