【前言】

　　在 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. 《设计模式之美》 <02>评判代码质量好坏的维度

    如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...

  2. 解决docker容器开启端口映射后，会自动在防火墙上打开端口的问题

    在docker中运行第三方服务时,通常需要绑定服务端口到本地主机.但使用 -p 参数进行的端口映射,会自动在iptables中建立规则,绕过firewalld,这对于端口级的黑白名单控制管理是很不利的 ...

  3. 4.1. Scrapy配置安装

    Scrapy的安装介绍 Scrapy框架官方网址:http://doc.scrapy.org/en/latest Scrapy中文维护站点:http://scrapy-chs.readthedocs. ...

  4. Linux查找并杀死僵尸进程(转)

    1.查看系统是否有僵尸进程 使用Top命令查找,当zombie前的数量不为0时,即系统内存在相应数量的僵尸进程. 2.定位僵尸进程 使用命令ps -A -ostat,ppid,pid,cmd |gre ...

  5. hibernate入门配置及第一个hibernate程序

    学习了hibernate后就想先给大家分享一下它的配置方法: jar包导入 一.数据库表的创建   二.开启hibernate配置 编译器:eclipse 数据库:mysql 1.创建第一个xml文件 ...

  6. 用jquery实现Ping测试网络连接性

    jquery的ping插件://要用的需要明白代码及自己改些地方 (function($) {    $.fn.ping = function(options) {        var opts = ...

  7. SQL Update多表联合更新的方法

    SQL Update多表联合更新的方法 (1) sqlite 多表更新方法 update t1 set col1=t2.col1 from table1 t1 inner join table2 t2 ...

  8. mac使用brew安装的PHP替换自带的PHP

    在.zshrc文件后面加上 export PATH="$(brew --prefix homebrew/php/php56)/bin:$PATH"

  9. oracle基本使用

    一.数据库 1.1 主流数据库 微软: sql server .access 瑞典MySQL: AB公司mysql IBM公司: db2 美国Sybase公司:sybase 美国oracle公司: o ...

  10. jmeter正则表达式提取多个值

    1.返回的数据截图,需要获取customerId.customerName的值 2.把jmeter查看结果树返回的数据放在 Regester,正则表达式写 : "customerId&quo ...