vue中使用viewerjs

首先創建一個項目

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(選項)