【前言】

　　在 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. 通过mysql 连接远程数据库时，输入密码后，提示10060错误

    能提示输入密码,说明网络能够连接,而且能连到服务器.输入密码后提示错误,说明应该是权限问题 解决方法: ​一.进入mysql数据库命令行 ​二.输入use mysql; ​三.设置root账号密码为1 ...

  2. shell变量引用

    var="www.sina.com.cn" echo ${var#*.} #sina.com.cn 从前向后删 echo ${var##*.} #.cn 贪婪模式从前向后删 ech ...

  3. mysqll中索引详细讲解

    MySQL(五) MySQL中的索引详讲   序言 之前写到MySQL对表的增删改查(查询最为重要)后,就感觉MySQL就差不多学完了,没有想继续学下去的心态了,原因可能是由于别人的影响,觉得对于My ...

  4. Tarjan-CV/BCC/SCC算法学习笔记

    DFS性质的应用--利用Tarjan算法求割顶.BCC.SCC 整理自<算法竞赛入门经典--训练指南>以及网络 DFS (depth first search)深度优先搜索算法 dfs森林 ...

  5. Thinkphp3.2.3关于开启DEBUG正常，关闭DEBUG就报错模版无法找到，页面错误！请稍后再试～

    这是Thinkphp3.2.3的一个坑- 具体原因也没搞清楚,测试环境都是好的,线上就出问题,是因为线上debug是关闭的 具体原委特此记录: 现象:(打开DEBUG就正常了,所以界面看不到具体报错滴 ...

  6. 搜索引擎选择： Elasticsearch与Solr（转载）

    原文地址:http://www.cnblogs.com/chowmin/articles/4629220.html 搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是 ...

  7. Path variable [contentHash:8] not implemented in this context: styles.[contentHash:8].css

    webPack 升级到 4.3.0 导致 extract-text-webpack-plugin 无法使用  

  8. VSS使用技巧

    理由很简单:迁出锁定!之所以强调这个,是因为这方面吃过的亏太多,我举几个例子:1.比如两个程序员增加了同一个功能,但是实现方法不同,比如甲:func1,乙 func2,两者代码也不一样第二个人在迁入代 ...

  9. django设置debug设为False,前端样式出现错乱或静态文件404问题。

    部署到生产环境中遇到的坑大部分都是引用静态文件带来的, setting设置里面debug设为False, 需要设置ALLOWED_HOSTS=["服务器ip"],不然运行不了的. ...

  10. 计数dp做题笔记

    YCJS 3924 饼干 Description 给定一个长度为\(n\)的序列,序列每个元素的取值为\([1,x]\),现在给定\(q\)个区间,求在所有取值方案中,区间最小值的最大值的期望是多少? ...