vue-easy-lightbox

A lightbox component for Vue.js 2+. You can drag / view / rotate pictures.

中文文档

DEMO

Installation

Different Builds

ES5 build is converted by Babel. If you need to compile it yourself, you can use a nonES5 build.

	ES5(default in package.json)	ES6
UMD(for browsers)	vue-easy-lightbox.es5.umd.min.js	vue-easy-lightbox.umd.min.js
CommonJS	vue-easy-lightbox.es5.common.min.js (pkg.main)	vue-easy-lightbox.common.min.js
ES Module(for bundlers)	vue-easy-lightbox.es5.esm.min.js (pkg.module)	vue-easy-lightbox.esm.min.js

use script tag

Grab the minified version under dist/vue-easy-lightbox.umd.min.js. It will register components globally.

<script src="path/to/vue-easy-lightbox.umd.min.js"></script>

example:

<div id="app">
  <div class="">
    <div
      v-for="(src, index) in imgs"
      :key="index"
      class="pic"
      @click="() => showImg(index)"
    >
      <img :src="src">
    </div>
  </div>
  <vue-easy-lightbox
    :visible="visible"
    :imgs="imgs"
    @hide="handleHide"
  ></vue-easy-lightbox>
</div>

<script src="path/to/vue.js"></script>
<script src="path/to/vue-easy-lightbox.umd.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      visible: false,
      imgs: [
        'https://via.placeholder.com/450.png/',
        'https://via.placeholder.com/300.png/',
        'https://via.placeholder.com/150.png/'
      ]
    },
    methods: {
      showImg (index) {
        this.index = index
        this.visible = true
      },
      handleHide () {
        this.visible = false
      }
    }
  })
</script>

With NPM

$ npm install --save vue-easy-lightbox

vue-easy-lightbox can be loading all with the Vue.use() method as same as the other vue plugin.

import Vue from 'vue'
import Lightbox from 'vue-easy-lightbox'

Vue.use(Lightbox)

<template>
  <vue-easy-lightbox
    :visible="visible"
    :imgs="imgs"
    @hide="handleHide"
  ></vue-easy-lightbox>
</template>

Usage of Component

<template>
  <div>
    <button @click="showSingle">Show single picture.</button>
    <button @click="showMultiple">Show a group of pictures.</button>

    <!-- default name -->
    <vue-easy-lightbox
      :visible="visible"
      :imgs="imgs"
      :index="index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
</template>

<script>
import VueEasyLightbox from 'vue-easy-lightbox'

export default {
  components: {
    VueEasyLightbox
  },
  data() {
    return {
      imgs: '',  // Img Url , string or Array
      visible: false,
      index: 0   // default
    }
  },
  methods: {
    showSingle() {
      this.imgs = 'http://via.placeholder.com/350x150'
      this.show()
    },
    showMultiple() {
      this.imgs = ['http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x150']
      this.index = 1  // index of imgList
      this.show()
    },
    show() {
      this.visible = true
    },
    handleHide() {
      this.visible = false
    }
  }
}
</script>

Use vue slot custom buttons or toolbar

<vue-easy-lightbox
  ...
>
  <!-- v-slot in vue@2.6.0+ -->
  <template v-slot:prev-btn="{ prev }">
    <button @click="prev">show the prev</button>
  </template>

  <template v-slot:next-btn="{ next }">
    <button @click="next">show the next</button>
  </template>

  <template v-slot:next-btn="{ close }">
    <button @click="close">close lightbox</button>
  </template>

  <template v-slot:toolbar="{ toolbarMethods }">
    <button @click="toolbarMethods.zoomIn">zoom in</button>
    <button @click="toolbarMethods.zoomOut">zoom out</button>
    <button @click="toolbarMethods.rotate">rotate</button>
  </template>
</vue-easy-lightbox>


<!-- Deprecated in 2.6.0+ -->
<vue-easy-lightbox>
  <template slot="prev-btn" slot-scope="props">
    <button @click="props.prev">show the prev</button>
  </template>

  <template slot="next-btn" slot-scope="props">
    <button @click="props.next">show the next</button>
  </template>

  <template slot="close-btn" slot-scope="props">
    <button @click="props.close">close lightbox</button>
  </template>

  <template slot="toolbar" slot-scope="props">
    <button @click="props.toolbarMethods.zoomIn">zoom in</button>
    <button @click="props.toolbarMethods.zoomOut">zoom out</button>
    <button @click="props.toolbarMethods.rotate">rotate</button>
  </template>
</vue-easy-lightbox>

Reference: Slots-Vue.js

Options

Properties

name	type	default	description
visible	Boolean	required	Control lightbox display
imgs	String/Array	required	Image's Url
index	Number	0	Index of imgList
escDisabled	Boolean	false	By default, press the esc key to close Modal during presentation.

Event

name	description
hide	When you click modal mask or close Btn, component will emit this event

Slot & Scoped Slot

slot name	slot props	type	description
prev-btn	prev	Function	show the prev img
next-btn	next	Function	show the next img
close-btn	close	Function	close modal
toolbar	toolbarMethods: { zoomIn, zoomOut, rotate }	{ Function }	zoom in, zoom out, rotate

License

MIT