Vue圖片瀏覽插件v-viewer的使用

永遠對生活充滿但願，對於困境與磨難，微笑應對。

前言

在項目中點擊小圖查看大圖，對大圖進行旋轉、放大、縮小是個很常見的需求，今天就跟你們分享下v-viewer插件如何在vue項目中使用。先看下最終實現的效果(圖片較大，點擊連接進行查看)

gif效果圖

安裝插件

• 終端執行

yarn add v-viewer
複製代碼

使用插件

• 在main.js中添加以下代碼

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// 圖片加載插件
Vue.use(Viewer,{name: 'viewer'});
複製代碼

• 在須要的組件中添加以下代碼

dom部分

<template>
 <!--圖片查看插件-->
 <div class="images" v-viewer="{movable: false}" style="display: none">
   <img v-for="src in images" :src="src" :key="src">
 </div>
</template>

複製代碼

js部分

export default {
   data() {
      return {
        images:[],
   },
   mounted: function () {
     // 圖片查看插件
     show () {
       // 找到.images的div掛載到$viewer上
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     }
   }
 }
複製代碼

• 在方法中調用

須要顯示多少張圖片，就往images數組中push多少張

viewLargerImage: function(event){
  const imgSrc = event.target.src;
  if(typeof imgSrc !=="undefined"){
    // 清空圖片數組
    this.images = [];
    this.images.push(imgSrc);
    this.show();
  }
}
複製代碼

在線體驗地址：chat-system | 示例代碼地址：chat-system

更多使用方法,詳見插件npm倉庫：v-viewer

寫在最後

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊
• 本文首發於掘金，未經許可禁止轉載💌