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";

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="https://raw.githubusercontent.com/ChiHai-Chuck/vue-image-viewer/HEAD/item.url" @click="imageView(index)">

Events