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. |