vue点击图片放大预览图片支持旋转等

npm install v-viewer --save

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

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

[
        "http://oss.tdcloud.trmap.cn/producephoto/1807181752/2c9180845e18bf9b015e19f1d3440010/别墅.jpg",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/201803190613566108.png",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/1248064370052.jpg",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311737/2c9180845e18bf9b015e19f1d3440010/201709260737493750.png"
    ]