【前言】

　　在 vue 项目中经常碰到图片预览需求，也就是点击小图查看大图。也有一些这样的第三方插件，如 vue-preview 等。但使用起来感觉版本经常变，而且有时 UI 需要在预览页面上加更多的东西，所以就自己结合 mint-ui 中的 swipe 组件写了一个很简洁的查看大图组件。实际项目中还在此基础上添加了一些其他功能。

【效果图】

　　点击就查看大图，再点击一下就关闭预览。

　　

【demo 地址】

　　码云: https://gitee.com/LiJinShi/imgPreView

vue-图片预览，查看大图的更多相关文章

  1. 使用saltui实现图片预览查看

    项目是基于dingyou-dingtalk-mobile脚手架的一个微应用,这个脚手架使用的UI是antd-mobile,它提供了一个图片上传的组件,但是未提供图片预览的组件,在网上找了不少如何在re ...

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

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

  3. vue 图片预览插件

    https://github.com/daidaitu1314/vue2-preview //cnpm cnpm install vue2-preview -save //引入 import VueP ...

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

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

  5. Vue PC端图片预览插件

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

  6. jQuery PC端图片预览，鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

  9. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  10. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

随机推荐

  1. 安卓开发之sql语句增删改查2(利用谷歌封装好的API进行增删改查)

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  2. SpringCloud之Feign声明式调用原理及配置

    1 什么是Feign Feign是一种声明式.模板化的HTTP客户端(仅在Application Client中使用).声明式调用是指,就像调用本地方法一样调用远程方法,无需感知操作远程http请求. ...

  3. Java BIO、NIO、AIO 基础，应用场景

    Java对BIO.NIO.AIO的支持: Java BIO : 同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必 ...

  4. Oracle cmd 命令

    1.登陆 输入sqlplus,回车.然后输入用户名和密码. 退出exit. 2.查看服务 Window打开服务的cmd命令 windows +R :services.msc---本地服务设置 rege ...

  5. 在线预览word、excel文件

    直接使用微软提供的在线预览服务. 免费 文件必须为网可访问地址,因为微软的服务器需要访问该文件

  6. shell脚本编程进阶及RAID和LVM应用2

    文件测试 存在性测试 -a FILE 这个选项的效果与-e 相同.但是它已经被弃用了,并且不鼓励使用 -e FILE 文件的存在性测试,存在则为真,否则为假 例:~]# [ -e /etc/rc.d/ ...

  7. zabbix上添加交换机监控记事

    ​ zabbix上添加交换机监控记事 ​ 第一次使用zabbix来添加监控华为s5720交换机,根本找不到头绪,像个无头的苍蝇一样的百度来处理,结果都没有任何效果,给自己增加了很多痛苦和心烦,增加不少 ...

  8. JSON 对象和字符串

    JSON 对象和字符串 粘贴自:https://www.cnblogs.com/cstao110/p/3762056.html Q:什么是"JSON字符串",什么是"JS ...

  9. 【wlan】iw命令集合

    查看所连接的客户端的个数和信息 iw dev wlan0 station dump root@OpenWrt:~# iw dev wlan0 station dump Station e0:ac:cb ...

  10. Python 去除字符串中的空行

    Python 去除字符串中的空行 mystr = 'adfa\n\n\ndsfsf' print("".join([s for s in mystr.splitlines(True ...