vue-fancybox

1.0.3 • Public • Published

Overview

Image preview component based on vue.js

More gestures are still in development.

DEMO

vue-fancybox

Install

npm install vue-fancybox --save
import fancyBox from 'vue-fancybox';

Base Usage

<div class="list" v-for="(n, index) in imageList" :data-index="index">
  <img @click="open($event)" :src="n.url">
</div>
export default {
  data () {
    return {
      imageList: [
        { width: 900, height: 675, url: 'http://ocm0knkb1.bkt.clouddn.com/1-1.jpg' },
        { width: 601, height: 1024, url: 'http://ocm0knkb1.bkt.clouddn.com/1-2.jpg' },
        { width: 1024, height: 700, url: 'http://ocm0knkb1.bkt.clouddn.com/1-3.jpg' }
      ]
    }
  },
  methods: {
    open (e) {
      fancyBox(e.target, this.imageList);
    }
  }
}

Options

fancyBox Parameter:

Parameter Description
e.target The current clicked image.
this.imageList A list of images.

this.imageList Options:

Option Description Type
width The width of the image. Number
height The height of the image. Number
url The address of the image. String

example

 
$ cd example
 
$ npm install
 
$ npm run dev
 

prompt

Need postcss-salad support

Package Sidebar

Install

npm i vue-fancybox

Weekly Downloads

506

Version

1.0.3

License

ISC

Last publish

Collaborators

  • xiecg