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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nice_每一天

一天带你入门到放弃vue.js(三)

自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

1441
来自专栏码云1024

Jupyter Notebook

3938
来自专栏自动化测试实战

xpath与css_selector定位详解

3566
来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1381
来自专栏hrscy

Unity 基础 - Input 类

任何一款游戏都必须和用户进行交互才行,最常用的就是通过键盘和鼠标进行交互,在 Unity 中想要获取用户的键盘或鼠标的事件的话,就必须使用 Input 类来获取...

1253
来自专栏web编程技术分享

HTML基础知识入门

3266
来自专栏十月梦想

less快速入门

我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的...

1243
来自专栏编程

如何构建你的第一个 Vue.js 组件

协作翻译 原文:How to build your first Vue.js component 链接:https://medium.freecodecamp....

2695
来自专栏从零开始学自动化测试

Selenium2+python自动化19-单选和复选框

最近发生了一些不愉快的事,其中缘由就不多说了,小编以后在这个公众号继续给大家更新,在过去的一年里感谢大家的一路支持,当然最感动的是能留下来的小伙伴,是你...

4158
来自专栏黑泽君的专栏

java基础学习_GUI_如何让Netbeans的东西Eclipse能访问、GUI(图形用户接口)_day25总结

java基础学习_GUI_如何让Netbeans的东西Eclipse能访问、GUI(图形用户接口)_day25总结

902

扫码关注云+社区

领取腾讯云代金券