vue中实现图片预览放大,缩小,旋转等功能, 使用viewerjs
前言:
之前使用过v-viewer实现图片查看的功能,但是不知道今年怎么回事,node线上的包下载下来不能用了,实现不了效果,又找到了一另一个好用的插件,那就是viewjs。
实现效果:
实现步骤:
1、安装插件
npm install viewerjs
2、案例代码
<template><div id="index" ref='imgView'><ul class="imgUrl"><li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li></ul></div>
</template><script>import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';export default {data() {return {imgArr:['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1141259048,554497535&fm=26&gp=0.jpg']}},mounted(){// const ViewerDom = document.getElementById('index');const ViewerDom = this.$refs.imgView;const viewer = new Viewer(ViewerDom, {// 相关配置项,详情见下面});}}
</script><style scoped>.imgUrl {display: flex;flex-wrap: wrap;}.imgUrl li{width:148px;height: 148px;list-style: none;border:2px solid #CCC;border-radius: 3px;padding: 1px;margin: 10px;cursor: pointer;}.imgUrl li img{width:100%;height: 100%;}
</style>
相关api:
键盘事件
仅在modal mode下可用 ESC
键: 退出全屏/关闭/退出/停止播放; Space
键: 停止/播放; ←
键: 查看上一张图片; →
键: 查看下一张图片; ↑
键: 放大图片; ↓
键: 缩小图片; Ctrl + 0
组合键: 缩小到初始大小; Ctrl + 1
组合键: 放大到原始大小;
配置参数
如果要更改全局默认选项,可以使用view . setdefaults(选项)
参数名称 |
参数类型 |
默认值 |
说明 |
---|---|---|---|
initialViewIndex |
Number |
0 |
定义用于查看的图像的初始索引 |
inline |
Boolean |
false |
支持 inline mode |
button |
Boolean |
true |
是否显示查看图片时右上角的关闭按钮 |
navbar |
Boolean / Number |
true |
是否显示底部导航栏 0 或者 false :不显示 1 或者 true :显示 2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示 |
title |
Boolean / Number / Function / Array |
true |
0 或者 false 时不显示1或者true或者function或者array时显示2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示function 在函数体内返回标题array 第一个参数表示可见性(0-4) 第二个参数就是标题 |
toolbar |
Boolean / Number / Object |
true |
标题栏是否显示和布局 0 或者 false 时不显示1或者true或者时显示 2 :当屏幕宽度大于768px时显示 3 :当屏幕宽度大于992px时显示 4 :当屏幕宽度大于1200px时显示 Object : Object类型详解 |
tooltip |
Boolean |
true |
放大或缩小时显示的百分比的文字提示true : 显示 false : 不显示 |
movable |
Boolean |
true |
是否可以拖动图片 |
zoomable |
Boolean |
true |
是否可以缩放图片 |
rotatable |
Boolean |
true |
是否可以旋转图片 |
scalable |
Boolean |
true |
是否可以缩放图片 |
transition |
Boolean |
true |
为一些特殊元素启用CSS3转换。 |
fullscreen |
Boolean |
true |
允许全屏播放 |
keyboard |
Boolean |
true |
启用键盘支持 |
backdrop |
Boolean / String |
true |
启用 modal 为false的时候不支持点击背景关闭 |
loading |
Boolean |
true |
加载图片的时候的loading图标 |
loop |
Boolean |
true |
是否可以循环查看图片 |
interval |
Number |
5000 |
定义图片查看器的最小的宽度 |
minWidth |
Number |
200 |
定义图片查看器的最小的高度 |
minHeight |
Number |
100 |
播放图片时 距离下一张图片的间隔时间 |
zoomRatio |
Number |
0.1 |
利用鼠标滚轮缩放图片时的比例 |
minZoomRatio |
Number |
0.01 |
缩小图片的最小比例 |
maxZoomRatio |
Number |
100 |
放大图片的放大比例 |
zIndex |
Number |
2015 |
定义查看器的CSS z-index值 modal 模式下 |
zIndexInline |
Number |
0 |
定义查看器的CSS z-index值 inline 模式下 |
url |
String / Function |
src |
原始图像URL如果是一个字符串,应该图像元素的属性之一如果是一个函数,应该返回一个有效的图像URL |
container |
Element / String |
body |
将查看器置于modal模式的容器 只有在 inline为 false的时候才可以使用 |
filter |
Function |
null |
过滤图像以便查看(如果图像是可见的,应该返回true) |
toggleOnDblclick |
Boolean |
true |
当你放大或者缩小图片时 双击还原 |
ready |
Function |
null |
当查看图片时被触发的函数 只会触发一次 |
show |
Function |
null |
当查看图片时被触发的函数 每次查看都会触发 |
shown |
Function |
null |
当查看图片时被触发的函数 每次查看都会触发 在show之后 |
hide |
Function |
null |
当关闭图片查看器时被触发的函数 每次关闭都会触发 |
hidden |
Function |
null |
当关闭图片查看器时被触发的函数 每次关闭都会触发 在hide之后 |
view |
Function |
null |
当查看图片时被触发的函数 每次查看都会触发 在shown之后 |
viewed |
Function |
null |
当查看图片时被触发的函数 每次查看都会触发 在view之后 |
zoom |
Function |
null |
在图片缩放时触发 |
zoomed |
Function |
null |
在图片缩放时触发 在 zoom之后 |
toolbar Object详解
key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"
key值名称 |
说明 |
---|---|
zoomIn |
放大图片的按钮 |
zoomOut |
缩小图片的按钮 |
reset |
重置图片大小的按钮 |
prev |
查看上一张图片的按钮 |
next |
查看上一张图片的按钮 |
play |
播放图片的按钮 |
rotateLeft |
向左旋转图片的按钮 |
rotateRight |
向右旋转图片的按钮 |
flipHorizontal |
图片左右翻转的按钮 |
flipVertical |
图片上下翻转的按钮 |
{key:number|Boolean} 显示或者隐藏对应key的按钮 为Number的时候为可见性 {key: String } 自定义按钮的大小 { key: Function } 自定义按钮点击的处理 { key: { show: Boolean | Number, size: String, click: Function } 自定义按钮的每个属性
size的取值范围: small medium default large
更多资料:
jquery中使用:https://www.cnblogs.com/aizai846/p/11495678.html
vue中实现图片预览放大,缩小,旋转等功能, 使用viewerjs相关推荐
- VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
- 【VUE】图片预览放大缩小插件(推荐阅读)
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
- vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
- uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片 富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
- pc 图片预览放大 端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
- pc 图片预览放大 端vue_移动端Vue.js的图片预览组件,支持放缩、滑动功能!
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览 源码分享 组件参数 data() { return { loading: 2, // 1成功 2 ...
- html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
- elementUi中的图片预览功能(图片放大、缩小)preview-src-list属性
一.图片有时候需要放大预览,放大后可支持放大缩小等功能,element中的preview-src-list属性可以实现. 二.主要代码: <el-form ref="verificat ...
最新文章
- AtCoder AGC032D Rotation Sort (DP)
- Anconda安装教程
- ABAP后台作业(background job)的几种状态
- Redis五大基本数据类型及其相关命令及常用用途
- c++ sort 从大到小排序_C语言必学的12个排序算法:堆排序(第7篇)
- java lambda函数类型_java8-lambda-函数式接口及四大类型函数接口
- hi模板文件报乱码问题
- 微信小程序登陆方式,详细代码步骤如下。
- 【IT项目管理】第3章 整合项目的资源
- 小白调用soso街景API
- Worthington 蛋白质组学/蛋白酶方案
- Apache网页与安全优化之--网页压缩
- 人工智能--不确定性推理概述
- weak_auth 小宁写了一个登陆验证页面,随手就设了一个密码。
- 《京东话费充值系统架构演进实践》--阅读
- 零知识证明(zero-knowledge proof)
- 博瑞ge 加装无线 carpaly方法和效果展示
- T.38 和传真的未来
- MySQL经典面试题--SQL语句
- 22222222222