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 ←) |