# 安装
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. TCP、UDP通信

    开放系统互连参考模型 (Open System Interconnect 简称OSI) OSI七层模型 1.应用层2.表示层3.会话层4.传输层5.网络层6.数据链路层7.物理层 TCP/IP模型1. ...

  2. word20170108逛景点 Sightseeing有用的词和句子

    有用的词: sights and attractions: 景点 ticket booth: 售票处 will call ticket: 网络售票 guided tour: 带导游的游览 audio ...

  3. 如何做一个项目.ppt

    链接:https://pan.baidu.com/s/1q8Ogj0xYQV_vk-HGcszxqw 提取码:0a82 复制这段内容后打开百度网盘手机App,操作更方便哦

  4. [Kubernetes]容器日志的收集与管理

    在开始这篇文章之前,首先要明确一点: Kubernetes 中对容器日志的处理方式,都叫做 cluster-level-logging ,也就是说,这个日志处理系统,与容器, Pod 以及 Node ...

  5. 03中间件mycat对pxc集群的分片处理

    安装第二个pxc集群 作为mycat的第二个分片 直接拷贝其中的一个虚拟机,然后还原到最初的状态,这样会小很多,启动改一下IP和基础配置,然后再次拷贝这个虚拟机两份改IP重启即可 正常安装pxc集群即 ...

  6. 让你的Spring Boot应用快速运行在Docker上面

    前置条件: 1. 服务器(我这边是CentOS7)上已经安装了Docker(安装步骤很简单,可以参考我上一篇博客) 2.服务器上已经安装了Java和Maven 在满足以上条件后,我们就可以开始了: 1 ...

  7. No enclosing instance of type Test is accessible. Must qualify the allocation with an enclosing instance of type Test (e.g. x.new A() where x is an instance of Test).

    Java编写代码过程中遇到了一个问题,main方法中创建内部类的实例时,编译阶段出现错误,查看错误描述: No enclosing instance of type Test is accessibl ...

  8. Filebeat+Kafka+Logstash+ElasticSearch+Kibana搭建完整版

    1. 了解各个组件的作用 Filebeat是一个日志文件托运工具,在你的服务器上安装客户端后,filebeat会监控日志目录或者指定的日志文件,追踪读取这些文件(追踪文件的变化,不停的读) Kafka ...

  9. java 静态资源访问详解

    一.java project项目 如果工程项目是java project的话获取资源文件 1.如果是在本工程根目录下直接访问 FileReader fr = new FileReader(" ...

  10. android studio 虚拟机adb.exe已停止工作的处理

    在搭建完android studio 后使用虚拟机或真机调试程序,出现如下错误.   在运行里输入cmd,打开命令行工具,使用netstat -aon|findstr 5037查看adb.exe的50 ...