bd-lightbox-vue v2.2.1

Installation

npm install --save bd-lightbox-vue

or

yarn add bd-lightbox-vue

Import the plugin into Vue

Global Import

import { createApp } from 'vue'
import App from './App.vue'

import BdLightbox from 'bd-lightbox-vue'

createApp(App).use(BdLightbox)

Import on Demand

<script lang="ts">
import { defineComponent } from 'vue'
import { BdLightbox } from 'bd-lightbox-vue'

export default defineComponent({
  components: {
    BdLightbox
  }
})
</script>

How to use

Mode 0 (default 0)

<template>
  <div>
    <p>This is Title</p>
    <div
      v-html="content"
      v-lightbox="{
        getImgs: getImages,
        openLightbox,
        exclude: [
          '.class-1',
          '#id-1',
          {
            width: '479',
            class: 'size-full'
          },
          {
            width: '1920'
          },
          [
            '.class-2',
            {
              class: 'class-3'
            }
          ]
        ]
      }"
    >
    </div>
    <BdLightbox ref="lightboxRef" :data="images" :options="options" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, getCurrentInstance, ref }  from 'vue'
  import { lightbox, UseLightBoxProps } from 'bd-lightbox-vue'

  export default defineComponent({
    directives: {
      lightbox  // getImgs、openLightbox、exclude
    },
    setup() {
      const options = {
        buttonShowTime: 5000, // ms default: 2300. optional
        spaceBetween: 32, // px default: 24. optional
        listHeight: 32, // px default: 100%. optional
        itemPosition: 'left', // left | center | right default: center. optional
        isFull: true, // default: flase. optional
        isLazyload: true  // defaulr false. optional
      }
      const content = `
        <div>
          this is demo
          <img src="images/1.png">
          <img src="images/2.png">
          <img src="images/3.png">
        </div>
      ` // Dynamic Acquisition
      const images = ref<string[] | null>(null)
      const instance = getCurrentInstance() // Get Instance

      const getImgs = (images: string[]): void => {
        images.value = images
      }
      const openLightbox = (id?: string) => {
        (instance.refs.lightboxRef as UseLightBoxProps).openLightbox(id)
      }

      return {
        options,
        content,
        getImgs,
        images,
        openLightbox
      }
    }
  })
</script>

Mode 1

<template>
  <div>
    <p>This is Title</p>
    <BdLightbox :data="images" :options="options" mode="1" />
  </div>
</template>

<script lang="ts">
  import { defineComponent }  from 'vue'

  export default defineComponent({
    setup() {
      const options = {
        buttonShowTime: 5000, // ms default: 2300. optional
        spaceBetween: 32, // px default: 24. optional
        listHeight: 32, // px default: 100%. optional
        itemPosition: 'left', // left | center | right default: center. optional
        isFull: true, // default: flase. optional
        isLazyload: true  // defaulr false. optional
      }
      const images = [
        'images/1.png', // string
        {
          src: 'images/2.png', // required,
          desc: 'this is description', // optional
          alt: 'this is alt' // optional
        }  // or object
      ]

      return {
        options,
        images
      }
    }
  })
</script>

v-lightbox options

component options

Events

BdLightbox also fires several events that can be further used in your Vue.js application. Each event has a item id ⬇️

Demo

PC

Phone