vue中使用viewerjs

項目創建

插件Viewer.js

vue init webpack mytest001

安裝viewerjs

npm install viewerjs

刪掉生成的項目里面的helloWord.vue 修改路由 創建一個index.vue

index.vue代碼:

<template>
  <div id="index">
    <ul>
      <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 {
    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, {
        // 相關配置項,詳情見下面
      });
    }
  }
</script>

<style>
  *{
    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%;
  }
</style>

鍵盤事件

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

原文地址：https://segmentfault.com/a/1190000016584946