vue中实现图片全屏缩放预览,支持移动端
# 安装
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="描述文字">
vue中实现图片全屏缩放预览,支持移动端的更多相关文章
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 解决VMware中Ubuntu18.04全屏问题
在VMware中Ubuntu18.04全屏问题 在虚拟机机中安装完Ubuntu18.04之后界面显示的特别小,默认的好像是800*600分辨率,看着不舒服.先是在设置->设备->显示 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
随机推荐
- spring cloud--zuul网关和zuul请求过滤
这里仍然以Windows和jdk为运行环境,按照下面的步骤打包-运行-访问就能看到效果.启动项目jar包: java -jar F:\jars-zuul\register-0.0.1-SNAPSHOT ...
- 基于Python的Webservice开发(二)-如何用Spyne开发Webservice
一.功能需求 本次案例是开发一个Item的新建的WebService.IN&OUT的类型JsonDocument. 通过传入相关的参数创建Item,且相关的参数可以被缺省. 二.实现代码 引入 ...
- java activemq初体验
1.下载安装ActiveMQ ActiveMQ官网下载地址:http://activemq.apache.org/download.html ActiveMQ 提供了Windows 和Linux.Un ...
- 看我如何粘贴别人代码--socketserver
源码执行流程 自己模仿一个(提取代码) 服务器类 import socket import threading import selectors class TCPServer: def __init ...
- python安装过程中的一些问题
因为看到大神的教程是基于python V2.7,下载该版本且安装成功. 安装目录: https://www.python.org/download/releases/2.7/ 根据系统进行安装包下载 ...
- 在虚拟机里连接PLC S7-200
1-使用PPI线连接 这次选择了在虚拟机里面来调试PLC,s7-200的型号是214-2AD23-0XB8 ,连接线是在淘宝上卖的(连接),在虚拟机里面试的时候没有反应,如下 在设备管理器里面观察,在 ...
- dataguard丢失归档日志处理
检查alert日志发现报错如下 Wed Mar 27 15:40:30 2019Managed Standby Recovery not using Real Time ApplyParallel M ...
- java常用类:1。包装类(以Integer类为例)2.String类 3.StringBuffer
包装类 把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lang包中. Number 类 N ...
- win10下caffe安装与mnist测试实验注意点
caffe安装 安装内容:win10教育版+anaconda2+python(无gpu版本) 安装教程:主要依照三年一梦教程:https://www.cnblogs.com/king-lps/p/65 ...
- luoguP1373 小a和uim之大逃离
DP专题 题目链接 思路 \(f[i][j][a][b][0/1]\)表示在\((i,j)\)这个格子,小a有a滴魔液,他的伙伴有b滴,上一步是小a(0)或者他的伙伴(1)吸取的魔液. (显然)数组开 ...