Vue PC端圖片預覽插件

*手上的項目剛剛搞完了，記錄一下項目中遇到的問題，留做筆記：

需求：

　　在項目中，需要展示用戶上傳的一些圖片，我從后台接口拿到圖片url后放在頁面上展示，因為被圖片我設置了寬度限制（150px）,所以圖片被縮放了，需求說加一個圖片預覽的功能

 

參考文章：

　　https://blog.csdn.net/yp090416/article/details/81486581（vue點擊圖片放大預覽圖片支持旋轉等）

 

准備工作：

　　（1）搜索插件：https://github.com/mirari/v-viewer（這是我百度查找的一個vue圖片預覽插件地址，里面有Live demo可以看效果）

　　（2）安裝插件：

　　　　npm install v-viewer

　　（3）引入main.js

　　　　

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

Vue.use(Viewer)

// 這里是插件的默認設置
Viewer.setDefaults({
　zIndexInline: 9999
})

 

　　（4）HTML

<div
    class="el-input el-input--small"
    v-if="images.length>0"
    >
    <viewer>
       <img
          width="150"
          v-for="src in images"
          :src="src"
          :key="src"
           >
   </viewer>
</div>

基本工作搞完了，然后根據在線demo里的調試情況將復制Options里的配置結果放在main.js的Viewer.setDefaults({})中即可，如下：

//Vue.use(Viewer) 手動配置寫法
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    inline: false,
    button: true,
    navbar: false,
    title: false,
    toolbar: true,
    tooltip: false,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: false,
    transition: true,
    fullscreen: false,
    keyboard: false
  }
})

放一張效果圖：

 

*說明：鼠標放置在圖片上，拖動滾動條即可對圖片進行放大縮小，也可以對圖片進行拖動，以及翻轉等等，如果我們的images中有多張圖片，那么點擊圖片下方的左右方向箭頭，即可切換預覽的圖片