# 安装
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. .Net Core的Excel导入

    1.前台代码,layui模板 2.后台代码,后台实现 (1)导入 (2)数据验证 (3)将导入数据存储在数据库中 (4)定义保存导入数据接口 (5)接口的实现调用业务层 (6)业务层接口 (7)业务层 ...

  2. docker部署redis及踩到的坑

    对docker很好奇,玩了一下,部署了一个redis,结果踩了很多坑 任务目的就是在docker中成功部署redis并保证数据持久化到本地,配置也使用本地配置 docker run -p : -v $ ...

  3. centos6.8编译安装mysql

    1.安装编译代码需要的包 yum -y install make gcc-c++ cmake bison-devel ncurses-devel 2.创建mysql用户(但是不能使用mysql账号登陆 ...

  4. ELK全Dokcer 部署

    环境准备: docker-complete 解压 su root 进入目录 rpm -Uvh *.rpm 安装docker systemctl start docker systemctl enabl ...

  5. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  6. 【easy】784. Letter Case Permutation

    Examples: Input: S = "a1b2" Output: ["a1b2", "a1B2", "A1b2", ...

  7. WebApi-2 自定义路由与默认路由

    向Web API添加路由 public static void Register(HttpConfiguration config) { //// Web API 配置和服务 //// 将 Web A ...

  8. springboot idea 代码更改自己编译设置

    第一步:在pom.xml文件中添加springboot 编译依赖 <dependency> <groupId>org.springframework.boot</grou ...

  9. vertx的Actor模型实现

    前言 note: Context 与 EventLoop 关系 : N ; 每次创建一个vericles或者multi instances 通过EventLoopGroup.next挑出一个Event ...

  10. python3 函数注意要点

    一.定义一个函数: def test(): #用def关键词开头 print('*****') def test2(a,b): #a,b为形参 print(a,b) return a,b # retu ...