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中有多張圖片，那麼點擊圖片下方的左右方向箭頭，便可切換預覽的圖片