viewer vue 文档_vue中使用viewerjs

项目创建

vue init webpack mytest001

安装viewerjs

npm install viewerjs

删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vue

index.vue代码:

  • 图片描述

import Viewer from 'viewerjs';

import 'viewerjs/dist/viewer.css';

export default {

name: 'HelloWorld',

data() {

return {

imgArr:[

'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472263623,506218584&fm=26&gp=0.jpg',

'http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146071_705561.jpg',

'http://www.sinaimg.cn/dy/slidenews/21_img/2015_17/2236_4146072_346494.jpg'

]

}

},

mounted(){

const ViewerDom = document.getElementById('index');

const viewer = new Viewer(ViewerDom, {

// 相关配置项,详情见下面

});

}

}

*{

padding:0;

margin: 0;

}

ul {

display: flex;

flex-wrap: wrap;

}

ul li{

width:265px;

height: 180px;

list-style: none;

border:2px solid #CCC;

border-radius: 3px;

padding: 1px;

margin: 10px;

cursor: pointer;

}

ul li img{

width:100%;

height: 100%;

}

键盘事件

仅在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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/333830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

junit junit_JSON的JUnit Hamcrest Matcher

junit junit这篇文章展示了如何编写JUnit测试来检查对象是否与JSON字符串匹配。 如果您要实现REST服务并想测试您的服务是否产生了预期的JSON响应,那么这非常重要。 JSONassert是比较JSON对象的有用库。 首先,您必须将Java对象转换为JSON字符串&#xf…

HTTP报文格式

HTTP报文格式 HTTP规范[RFC 1945;RFC 26167;RFC 7540:包含了对HTTP 报文格式的定义。HTTP 报文有两种:请求报文和响应报文。 HTTP请求报文 从客户向服务器发送请求报文。 结构如图: 开始行 第一行为开始行也叫做…

什么是公倍数

公倍数(common multiple)是指在两个或两个以上的自然数中,如果它们有相同的倍数,这些倍数就是它们的公倍数。公倍数中最小的,就称为这些整数的最小公倍数(lowest common multiple)。 A和B,A/BC&#xff0c…

代理服务器

代理服务器 是一种网络实体,又称万维网高速缓存。代理服务器把最近的一些请求和响应暂存在本地磁盘中。 当新请求到达时, 若代理服务器发现这个请求与暂时存放的请求相同, 就返回暂存的响应, 而不需要按URL的地址再次去互联网访问…

json解析对象时指定解析_不解析,使用解析对象

json解析对象时指定解析将面向对象的后端与外部系统集成的传统方式是通过数据传输对象 ,这些对象在外出之前先序列化为JSON,然后在返回时反序列化。 这种方法很流行,而且是错误的。 序列化部分应该由打印机代替,我在前面已经解释过…

centos7设置键盘类型_CentOS 7 系统区域(语言)和键盘设置

即使是在window中,平常说的语言设置这一项也是归类为系统区域,CentOS可以通过修改/etc/locale.conf配置文件或使用localectl命令来进行设置,一般在安装时设置为默认选择(英文、美式键盘)即可。 修改locale.conf [root@localhost ~]#vim /etc/locale.conf LANG="en_US.U…

什么是公约数/公因数

公约数,亦称“公因数”。它是指能同时整除几个整数的数。如果一个整数同时是几个整数的约数,称这个整数为它们的“公约数”;公约数中最大的称为最大公约数。对任意的若干个正整数,1总是它们的公因数。 例如: 12 和 15…

vue对象拼接_vue 俩个数组对象合并成一个

情况是这样的后端给了几个接口数据 我合成一个 前端小白 勿喷 data(){return{list:[{date:20201, mc : 1 }, {date:20202, mc : 2 }, {date:20203, mc : 3 }, {date:20204, mc : 4, } ], newlist:[ {date:20201, mc : 6, age:12 }, {date:20202, mc : 3, age:12 }, {date:20203…

jdk8 获取上一个月时间_JDK 10:FutureTask获取一个toString()

jdk8 获取上一个月时间我已经很长时间了,对于大多数具有独特属性的Java类,开发人员应该花些时间重写Object.toString() ,即使它仅是由IDE生成的实现或使用诸如Apache之类的库类来实现Commons Lang的ToStringBuilder 。…

什么是质数

质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数。 质数又称素数。一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数;否则称为合数(规定1既不是质数也不是合数)。…

计算机网络笔记----应用层

应用层应用层协议原理网络应用程序的体系结构客户-服务器体系结构P2P体系结构进程通信进程与计算机网络之间的接口进程寻址可供应用程序使用的运输服务可靠数据传输吞吐量定时安全性因特网提供的运输服务TCP服务面向连接的服务可靠的数据传送服务拥塞控制TCP安全UDP服务应用层协…

js 导出pdf上传至oss_js实现oss文件上传及一些问题

关于兼容性问题,ie8以下的可以使用4.x的版本一、引入sdk和jq二、基本配置var client newOSS.Wrapper({region:,accessKeyId:‘,accessKeySecret:,bucket:})region:阿里云服务器地址accessKeyId:您的keyaccessKeySecret:您的密码&a…

缓冲池java_了解Java缓冲池

缓冲池java了解Java缓冲池 缓冲池空间位于垃圾收集器管理的内存之外。 这是分配本地堆外内存的一种方法。 使用缓冲池有什么好处? 为了回答这个问题,让我们首先了解什么是字节缓冲区。 字节缓冲区 非直接缓冲区 ByteBuffer类附带了java.nio包。 它允许我…

什么是合数

合数指自然数中除了能被1和本身整除外,还能被其他数(0除外)整除的数。 合数是指在大于1的整数中除了能被1和本身整除外,还能被其他数(0除外)整除的数。与之相对的是质数,而1既不属于质数也不属…

计算机网络应用层笔记--域名系统DNS

域名系统DNS标识因特网上主机的方式主机名IP地址域名系统(DNS)工作过程互联网的域名结构顶级域名国家顶级域名nTLD通用顶级域名gTLD基础结构域名二级域名类别域名行政区域名域名树DNS规定域名服务器域名服务器的层次根域名服务器顶级域名服务器(TLD服务器)权限域名服务器本地域…

protobuf3 自定义option_Protobuf3 语法指南

以前我翻译了 Protobuf2 语法指南,现在 千念飞羽把protobuf3的语法指南也翻译了,我也转载一下,读者可以有个参考。 译文地址是: Protobuf3语言指南。英文原文:Language Guide (proto3)中文出处:Protobuf语言指南[译]Pr…

web.xml.jsf_面向初学者的JSF 2.0教程

web.xml.jsf1.什么是JSF? JSF是Java Server Faces的首字母缩写。 它是一种服务器端处理技术,它允许将服务器端代码嵌入到网页中。 由于可以将服务器端处理和渲染代码嵌入网页本身,因此使项目的整体编码更加简单。 减少文件总数和大小。 JSF包…

0 是什么数

0 是最小的自然数0 是有理数0 既不是正数也不是负数,而是正数和负数的分界点0 是介于 -1 和 1 之间的整数0 不是奇数,而是偶数(一个非正非负的特殊偶数)0 不是质数,也不是合数0 在多位数中起占位作用,如108…

ubuntu下vscode使用cmake编译运行c++配置文件

在gcc/g能编译运行c的情况下,使用cmake编译只需要修改以下两个文件。 launch.json {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid830387"version&quo…

r语言mfrow全程_R语言中的色彩_LearningR - SegmentFault 思否

1. 基本颜色1.1 palette()1.1.1 palette的默认颜色palette()## [1] "black" "red" "green3" "blue" "cyan" "magenta" "yellow"## [8] "gray"pie(rep(1,8), colpalette(), border palette()…