A lightbox component for Vue.js 3 applications, with drag, zoom, rotate support.
How to use it:
1. Import and register the VueEasyLightbox component.
import VueEasyLightbox from 'vue-easy-lightbox';
const app = Vue.createApp({ }) app.use(VueEasyLightbox) app.mount('#app')
2. Add the VueEasyLightbox component to the app.
<template> <div> <button @click="showSingle">Single Lightbox.</button> <button @click="showMultiple">Gallery Lightbox</button> <!-- all props & events --> <vue-easy-lightbox scrollDisabled escDisabled moveDisabled :visible="visible" :imgs="imgs" :index="index" @hide="handleHide" ></vue-easy-lightbox> </div> </template>
export default { components: { VueEasyLightbox }, data() { return { imgs: '', visible: false, index: 0 } }, methods: { showSingle() { this.imgs = '1.jpg' // or this.imgs = { title: 'A placeholder', src: '1.jpg' } this.show() }, showMultiple() { this.imgs = [ '1.jpg', '2.jpg' ] // or this.imgs = [ { title: 'Image Title', src: '1.jpg' }, '2.jpg' ] this.index = 1 // index of imgList this.show() }, show() { this.visible = true }, handleHide() { this.visible = false } } }
3. Available component props.
imgs: { type: [Array, String] as PropType<PropsImgs>, default: () => '' }, visible: { type: Boolean, default: false }, index: { type: Number, default: 0 }, scrollDisabled: { type: Boolean, default: true }, escDisabled: { type: Boolean, default: false }, moveDisabled: { type: Boolean, default: false }, titleDisabled: { type: Boolean, default: false }, maskClosable: { type: Boolean, default: true }, teleport: { type: [String, Object] as PropType<TeleportProps['to']>, default: null }, swipeTolerance: { type: Number, default: 50 }, loop: { type: Boolean, default: false }, rtl: { type: Boolean, default: false }, zoomScale: { type: Number, default: 0.12 }, maxZoom: { type: Number, default: 3 }, minZoom: { type: Number, default: 0.1 }, rotateDisabled: { type: Boolean, default: false } zoomDisabled: { type: Boolean, default: false } pinchDisabled: { type: Boolean, default: false }
4. Event handlers.
- hide
- on-error(e)
- on-prev(oldIndex, newIndex)
- on-next(oldIndex, newIndex)
- on-prev-click(oldIndex, newIndex)
- on-next-click(oldIndex, newIndex)
- on-index-change(oldIndex, newIndex)
Preview:
Changelog:
v1.16.0 (04/16/2023)
- Feat: Add pinchDisabled (default: false) prop to disable pinching.
v1.15.0 (03/18/2023)
- Feat: Support types condition in package.json exports field.
v1.14.0 (02/28/2023)
- Feat: Add zoomDisabled prop to disable image zooming.
v1.13.0 (02/23/2023)
- Feat: Add rotateDisabled prop to disable the rotation of the image.
v1.11.0 (11/26/2022)
- Fix: overflow-y:hidden is not removed before unmounting component.
v1.10.0 (11/04/2022)
- Feat: Add minZoom to specify the minimum level of zoom scale.
v1.9.0 (10/09/2022)
- Feat: Add on-rotate event, which returns the clockwise angle (deg: number) when the event emit.
v1.8.1/2 (08/29/2022)
- Bugfixes
v1.8.0 (08/12/2022)
- Feat: Add maxZoom zoomScale to specify the zoom level.
v1.7.1 (07/26/2022)
- Fix: The default parameters of useEasyLightbox() is missing.
v1.7.0 (07/17/2022)
- Feat: Add composable useEasyLightbox() for setup().
v1.6.0 (07/15/2022)
- Breaking Change: ES5 bundles is removed.
- Feat: Add some A11y attrs.
- Feat(type): Add emits type declaration.
v1.5.0 (07/04/2022)
- Feat: Enable or disable click mask to close vue-easy-lightbox.
v1.4.1 (03/07/2022)
- Feat: Reduced zoom in/out ratio.
- Feat: Zooming by mouse wheel is available only when scrollDisabled is true.
- Breaking Change: scrollDisabled now defaults to true.
v1.4.0 (03/07/2022)
- Feat: Support zoom by mouse wheel.
- Feat: Support double click to enlarge img.
v1.3.0 (02/03/2022)
- Feat: Support RTL (right to left) languages.
v1.2.4 (09/19/2021)
- Fix: Firefox Dragging issues
v1.2.3 (08/17/2021)
- Feat: Make vue-devtool display named components.
- Fix: Can’t get toolbarMethods from slot props.
v1.2.1 (06/15/2021)
- Fix: Detect window incorrect on server side.
v1.2.0 (05/16/2021)
- Feat: Add loop prop to enable loop switching of image.
- Feat: Add scrollDisabled prop to disable scrolling when modal is visible.
- Feat: When moveDisabled is set to true, it is possible to switch images by swiping.
- Feat: Add swipeTolerance prop for swipe distance detection.
- Feat: on-prev-click/on-next-click is renamed to on-prev/ on-next, the old event name is kept and you can still use it.
v1.1.0 (04/11/2021)
- Provides a new prop teleport to solve css style problems in some cases. teleport allows you to customize the mount node.
v1.0.0 (04/10/2021)
- Feat: New animation throttling.
- Feat: d.ts for .tsx.
- Feat: Small size.
- Fix: css class typos.
- Fix: Touch event handler error may occur in some cases.
- Fix: Scroll chaining when touchmove.
- Fix: Img may be blurred in some cases.
v0.14.0 (07/11/2020)
- Fix: Syntax error on IE11.
Download Details:
Author: XiongAmao
Live Demo: https://onycat.com/vue-easy-lightbox/
Download Link: https://github.com/XiongAmao/vue-easy-lightbox/archive/master.zip
Official Website: https://github.com/XiongAmao/vue-easy-lightbox
Install & Download:
# NPM
$ npm install vue-easy-lightbox --save