专栏首页世界第一语言是javavue点击图片放大预览图片支持旋转等

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 条评论
登录 后参与评论

相关文章

  • springboot2新版springcloud微服务全家桶实战

    本篇文章是springboot2.x升级后的升级springcloud专贴,因为之前版本更新已经好久了,好多人评论可不可以出个新版本,大家一定要注意,这是spr...

    用户2235302
  • sb2.0新版springcloud微服务实战:Consul+Zuul+Feign/Ribbon+Hystrix Turbine+Config+sleuth+zipkin

    本篇文章是springboot2.x升级后的升级springcloud专贴,因为之前版本更新已经好久了,好多人评论可不可以出个新版本,大家一定要注意,这是spr...

    用户2235302
  • flutter中bottomNavigationBar切换组件保存状态方案

    我们在开发的时候用底部导航栏是很常见的,flutter给我们默认带了bottomNavigationBar,但是发现你直接这样写的时候,点击导航栏切换组建的时候...

    用户2235302
  • 【NLP】 NLP领域最具影响力的国内外会议介绍

    众所周知,参加学术会议是进入学术圈、走进学术前沿的重要方式。在学术会议上,不仅可以集中听取最新的成果报告,还有讲习班、工作坊、社交活动等形式,了解那些不会写到论...

    用户1508658
  • 好多东西都要学,而且排名不分先后

    记得以前有个同学问过我,HTML,CSS,JS,jQuery,这些先学哪个呢?它们的顺序是什么?我回答他说,就是先学HTML,再学CSS,再学JS或JQ,后来我...

    web前端教室
  • 机器学习简介及在短临天气预警中的应用

    3月25号中国气象科学院灾害天气国家重点实验室的胡志群研究员,通过直播形式做了“机器学习简介及在短临天气预警中的应用”的学术报告,系统地介绍了机器学习的发展历史...

    bugsuse
  • 业界 | 4个学生,1个暑假,百度深度学习开源平台PaddlePaddle诞生了智能桃子分拣器

    机器之心原创 作者:景和 作为商业公司的百度正在积极推动开源文化。百度 COO 陆奇曾在内部讲话中表示,开源代码写得好,不仅能解决大家的痛点,开源的代码也会变得...

    机器之心
  • 数据库: 安装配置数据库,使用Navicat for MySQL和手机APP 连接测试(如果上一节碰到问题可参考这一节)

    在搜索框中输入“services,msc” ,enter键确认之后找到MySQL服务,双击打开属性对话框,通过点击“启动”,“停止”来改变服务状态。

    杨奉武
  • 缓冲区溢出实战教程系列(三):利用OllyDbg了解程序运行机制

    想要进行缓冲区溢出的分析与利用,当然就要懂得程序运行的机制。今天我们就用动态分析神器ollydbg来了解一下在windows下程序是如何运行的。

    FB客服
  • C++认识容器的迭代器

    假设有个map容器,用于存储大学班级中各个家乡省份对应的学生数,key为省份中文全拼,value为学生数。现需要删除人数为0的记录,删除代码如下:

    Dabelv

扫码关注云+社区

领取腾讯云代金券