vuejs 图片预览插件 v-viewer

https://github.com/mirari/v-viewer github地址。

1.安装配置

npm install v-viewer --save

2.在main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
 
//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

3.在页面中使用

<template>
    <viewer :images="images">
       <img v-for="src in images" :src="src" :key="src" width="300">
    </viewer>
</template>
 
<script type="text/ecmascript-6">
    export default {
        name: "images",
        data() {
            return {
                images : []
            }
        },
        created() {
            //图片是从后台查的
            this.getData()
        },
        methods: {
            getData() {
                var _this = this
                _this.$http.get('/admin/attach/product')
                    .then(function (response) {
                        _this.images = response.data.data
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        }
    }
</script>

images 数组格式

[
        "http://***************",
        "http://***************",
        "http://***************",
    ]