vue-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";
import "vue-image-viewer/lib/vue-image-viewer.css";

Vue.use(imageViewer);

export default {
    name : "demo",
    components : {
        imageViewer
    },
    data() {
        return {
            imageViewerParams : {
                index : 0,
                page : 0,
                images : [
                    {
                        name : "image1",
                        url : "/static/images/1.jpg"
                    },
                    {
                        name : "image2",
                        url : "/static/images/2.png"
                    },
                    {
                        url : "/static/images/3.gif"
                    }
                ]
            }
        }
    },
    methods : {
        imageViewShow() {
            this.$imageViewer.show(this.imageViewerParams);
        },
        imageViewHide() {
            this.$imageViewer.hide();
        }
    }
}

<button @close="imageViewShow">open</button>
<button @close="imageViewHide">close</button>

Props

Name	Type	Default	Description	Required
index	Number	0	Which image to show first.	No
page	Number	0	The page of the thumbnail list.	No
images	Array	[]	Image list.	Yes