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

vue图片点击放大预览v-viewer库使用

提到图片放大预览，可能好多人想到的是lightbox，在vue中使用lightbox还挺麻烦,但是伸手党做习惯了，所以去github上搜索了一个，感觉效果很完美，简单实用，所以推荐给大家。

https://github.com/mirari/v-viewer github地址，下面是我这块使用的效果图。

20180807184134497.png

1.安装配置

npm install v-viewer --save

在main.js中引入

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

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

2.使用

<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://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"
    ]

关注

如果有问题，请在下方评论，或者加群讨论 128806068

关注下方微信公众号，可以及时获取到各种技术的干货哦，如果你有想推荐的帖子，也可以联系我们的。