# 安装
npm install vue-photo-preview --save
# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
//或者
//var option={....} option配置请查看 http://photoswipe.com/documentation/options.html
//Vue.use(preview,option)
# umd
<link rel="stylesheet" type="text/css" href="路径/dist/skin.css"/> <script src="路径/dist/vue-photo-preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var options={
fullscreenEl:false //关闭全屏按钮
} Vue.use(vuePhotoPreview,options) new Vue({
el:'#app'
})
</script>
# html
//在img标签添加preview属性 preview值相同即表示为同一组
<img防止转换 src="xxx.jpg" preview preview-text="描述文字"> //分组
<img防止转换 src="xxx.jpg" preview="1" preview-text="描述文字">
<img防止转换 src="xxx.jpg" preview="1" preview-text="描述文字"> <img防止转换 src="xxx.jpg" preview="2" preview-text="描述文字">
<img防止转换 src="xxx.jpg" preview="2" preview-text="描述文字">

插件配置文档

在线演示

Github

vue中实现图片全屏缩放预览,支持移动端的更多相关文章

  1. Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  2. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

  3. 解决VMware中Ubuntu18.04全屏问题

    在VMware中Ubuntu18.04全屏问题   在虚拟机机中安装完Ubuntu18.04之后界面显示的特别小,默认的好像是800*600分辨率,看着不舒服.先是在设置->设备->显示 ...

  4. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

随机推荐

  1. 第十七节,OpenCV(学习六)图像轮廓检测

    1.检测轮廓 轮廓检测是图像处理中经常用到的,OpenCV-Python接口中使用cv2.findContours()函数查找检测物体的轮廓. cv2.findContours(image, mode ...

  2. 【译】索引进阶(七):SQL SERVER中的过滤索引

    原文链接:传送门. To be continued...

  3. Qt+mpg123+openal播放MP3流

    #ifndef PLAYSTREAM_H #define PLAYSTREAM_H #include <QObject> #include "../libMPG123/mpg12 ...

  4. MemCache详细解读(转)

    参考:https://www.cnblogs.com/xrq730/p/4948707.html MemCache是什么 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统, ...

  5. js数据结构与算法——队列

    <script> //创建一个队列 function Queue(){ let items = []; //向队尾添加一个新的项 this.enqueue = function(eleme ...

  6. TP5多模块开发

    一般的thinkphp框架一般都是单模块开发的,但有时候我们可能需要进行多模块开发,例如添加个后台管理的模块.这次给人讲课,在Tp多模块开发的配置上翻车,感觉很有必要总结下,话不多说,直接上干货. 总 ...

  7. js 字符串切割

    对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() ...

  8. python2使用eval 让除法可以保留小数

    使用的Python版本2.7, 我在使用eval('1/3')发现一个问题,结果都是去掉小数,保留了整数.但是我需要保留小数,各种查资料,最后在一大神指点下,成功解决这个问题,解决办法是: 加载模块: ...

  9. DataTable插件通过js导出Excel

    $('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...

  10. Justoj 2389: 拼接三角形 二分查找

    2389: 拼接三角形 时间限制: C/C++ 1 s      Java/Python 3 s      内存限制: 128 MB      答案正确: 7      提交: 21 提交 我的状态 ...