octo-kumo / vue-image-viewer

a simple and lightweight image viewer.

vue-image-viewer

a simple and lightweight picture viewer. Demo

一个用于Vue2.0的简单且轻量化的图片查看器。

Install

npm install vue-image-viewer --save

Usage

import imageViewer from "vue-image-viewer";

Vue.use(imageViewer);

export default {
    data() {
        return {
            images : [
                {
                    name : "image1",
                    url : "/static/images/1.jpg"
                },
                {
                    name : "image2",
                    url : "/static/images/2.png"
                },
                {
                    url : "/static/images/3.gif"
                }
            ]
        }
    },
    created() {
        this.$imageViewer.images(this.images);
    },
    methods : {
        imageView(index) {
            this.$imageViewer.index(index);
            this.$imageViewer.show();
        }
    }
}

<img v-for="(item,index) in images" :key="index" :src="item.url" @click="imageView(index)">

Events

Name	Params	Type	Description
show	-	-	Open picture viewer.
hide	-	-	Close picture viewer.
index	num	Number	Which image to show first.
page	num	Number	The page of the thumbnail list.
images	data	Array	Set image list.