bd-lightbox-vue

A lightweight lightbox inspired component for Vue.js

中文文档

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

Attribute	required	type	Description
getImgs	yes	function	Get a list of images
openLightbox	yes	function	Image clicked
exclude	no	string or Object or Array	Image attributes that need to be excluded

component options

Attribute	required	type	Description
buttonShowTime	no	number	Button to show time
spaceBetween	no	number	Spacing of images
listHeight	no	number	Height
itemPosition	no	string	Positioning
isFull	no	boolean	isFull = true The image takes up the entire width
isLazyload	no	boolean	isLazyload = true Images lazyload

Events

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

Event name	When is event fired
lightboxOpen	when the overlay is opened
lightboxClose	when the overlay is closed (button or ESC key or Space key)
lightboxSwitch	Lightbox sidebar item is clicked
lightboxNext	when the user moves to the next picture (arrow or key →)
lightboxPrev	when the user moves to the previous picture (arrow or key ←)

Demo

PC

Phone