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

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

推荐阅读更多精彩内容

  • 基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了...
    _执着执着再执着阅读 27,467评论 5 221
  • 减肥的办法五花八门,什么绝食啦?什么吃减肥药啦?等等。大多数人最终都以失败收场,原因有很多,但最为普遍的是执行力不...
    C雀先生阅读 40评论 0 0
  • 1.cocoapod的使用 第一:cocoapod的使用
    乡水情缘阅读 613评论 0 0
  • 今天,是补习的最后一天,相对于前些天还是轻松些的,老师,也给了我们玩的时间,没有那么严厉。 这天,我们可是撒开了欢...
    HEARTBEA阅读 39评论 0 0
  • 文/唐 瑭 前不久看娱乐八卦新闻说,窦唯的前任和前前任,前前任和前前前任都成了好闺蜜。新闻里言之凿凿,放上了王菲、...
    一盒糖果阅读 86评论 0 0