v-viewer(1.4.2)

非常实用的图片预览插件,支持旋转、缩放、翻转等操作

一、npm安装

npm i v-viewer -S

二、全局引入(main.js中)

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
//配置项
Viewer.setDefaults({
zIndexInline:9999
})

三、使用

<!--1、以组件的形式-->
<viewer :images="photo">
<img v-for="(src,index) in photo" :src="src" :key="index"/>
</viewer> <!--2、以指令的形式-->
只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。
<div v-viewer>
<img v-for="(src,index) in photo" :src="src" :key="index"/>
</div>

相关配置项

效果图

vue常用插件之图片预览的更多相关文章

  1. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  2. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  3. sublime3下载安装及常用插件、浏览器预览设置

    之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢),于是得在笔记本电脑上重新安装一遍.几个软件各种出错,花了一下午才安装好,必须记录下来啊! 这篇文章主要介绍s ...

  4. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  5. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  6. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  7. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  8. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  9. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

随机推荐

  1. spring cloud微服务快速教程之(十一) Sleuth(zipkin) 服务链路追踪

    0.前言 微服务架构上众多微服务通过REST调用,可能需要很多个服务协同才能完成一个接口功能,如果链路上任何一个服务出现问题或者网络超时,都会形成导致接口调用失败.随着业务的不断扩张,服务之间互相调用 ...

  2. Sublime text3的安装及python开发环境的搭建

    作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...

  3. [CSGO]跑图CFG

    bot_kick //剔除所有电脑 sv_cheats 1 //允许作弊指令 bot_stop 1 //bot静止 mp_warmup_end //结束热身时间 mp_freezetime 0 //开 ...

  4. C#设计模式学习笔记:(9)组合模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第四个模式--组 ...

  5. EF--封装三层架构IOC

    为什么分层? 不分层封装的话,下面的代码就是上端直接依赖于下端,也就是UI层直接依赖于数据访问层,分层一定要依赖抽象,满足依赖倒置原则,所以我们要封装,要分层 下面这张图和传统的三层略有不同,不同之处 ...

  6. 想学大学计算机课?这 37 门 CS 专业必修课,了解一下

    最近,不少高校延迟开学,大家只能宅家上网课. 有一些朋友,想趁此期间,多学点计算机的专业课,却不知从何学起. 211,985大学的计算机专业课都是经过授课教师精心安排的,从大一到大四,课程合理设置,循 ...

  7. ACP知识总结

    由于ACP是一个敏捷开发的系统性知识,下面只针对我自身学习的知识总结,若需要完整的考试学习资料,可评论区或私聊我拿.   敏捷估计与规划.png   ACP知识点锦集.png   敏捷项目软件总结.p ...

  8. Gartner评估:众包将掀起IT服务市场的革命

    国际IT顾问与咨询公司Gartner发布评估报告,称众包是中国的一种新兴业务模式,将掀起IT服务市场的革命.然而,只有很少的的服务提供商会构建众包平台来尝试使用该业务模式.IT服务提供商的业务部门负责 ...

  9. RAID | 故障处理

    RAID | 故障处理 Unconfigured(good), Spun Up 背景:磁盘替换后在导入外部配置时提示失败,磁盘状态如题. MegaCli -pdgetmissing -a0查看miss ...

  10. 0.96寸OLED显示屏驱动手册(SSD1306)

    MCU IIC接口 IIC通信接口由从地址位SA0,IIC总线数据信号SDA(输出SDAout/D2和输入SDAin /D1)和IIC总线时钟信号SCL(D0).不管是数据线还是时钟线都需要连接上拉电 ...