【前言】

　　在 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. oracel数据泵导出导入

    Oracle11g 使用数据泵导入/导出数据 expdp/impdp 目标:使用oracle数据泵,将A电脑上的数据库databaseA导出后,再导入到B电脑上的数据库databaseB中. A电脑上 ...

  2. STM32——CAN协议帧的标准格式和扩展格式与优先级的关系

    一.CAN数据帧的标准格式和扩展格式 我们知道CAN总线上的数据帧都可以配置一个ID号,其可以为11位(标准ID格式)或者29位(扩展ID格式),这也是数据帧的标准格式和扩展格式的区别所在. 这个ID ...

  3. AJAX—AJAX基础

    AJAX简介 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  4. SQL Server 元数据分类

    SQL Server 中维护了一组表用于存储 SQL Server 中所有的对象.数据类型.约束条件.配置选项.可用资源等信息,这些信息称为元数据信息(Metadata),而这些表称为系统基础表(Sy ...

  5. okhttp异步请求流程和源码分析

    在上一次[http://www.cnblogs.com/webor2006/p/8023967.html]中对同步请求进行了详细分析,这次来分析一下异步请求,而关于异步请求和同步请求其使用方式基本上差 ...

  6. 关于C++编译时内链接和外链接

      最近在阅读<大规模C++ 程序设计> 在第1部分,作者讨论了内链接和外链接问题(因为大规模的C++程序有繁多的类和单元.因此编译速度是个大问题) 这里记录一下关于内链接和外链接的理解. ...

  7. Jmeter - 命令行参数

    同步更新至个人博客:https://njlife.top/2019/07/12/Jmeter-%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%8F%82%E6%95%B0/ Jmeter ...

  8. vue多层次组件监听动作和属性

    v-bind="$attrs" v-on="$listeners" Vue 2.4 版本提供了这种方法,将父组件中不被认为 props特性绑定的属性传入子组件中 ...

  9. sentinel.conf 配置

    daemonize yes logfile "/home/data/redis/redis_sentinel.log" sentinel monitor mymaster 192. ...

  10. 再度吐槽，PHP在centos7的安装方式稍不注意可能就打击你的积极性

    由于装新机器,没仔细看随便找了篇博文就匆匆安装了php73结果,连配置文件,扩展模块都找不着在哪这里介绍一个linux的查找命令 find / -name php73* 这一命令使用了*这一正则匹配的 ...