vue圖片點擊放大預覽

第一種：viewerjs使用介紹(PC、移動端都兼容)

1、先安裝依賴

 npm install v-viewer --save 

2、main.js內引用並注冊調用

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

Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

3、代碼中使用xxx.vue

<template>
    <div class="content">
        <viewer :images="imgs">
            <img v-for="src in imgs" :src="src.url" :key="src.title">
        </viewer>
   </div>
</template>
<script>
export default {
  data () {
    return {
      imgs: [
       {
          url: '../../static/image/aze.jpg',
            title: '阿澤'
        },
        {
          url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '圖片2'
        }
      ]
    }
  },

　　methods: {

　　pass(){

　　　　var _this = this;

　　　　$.ajax({
　　　　　　url: "https://zxc.cn/upload/Photo",
　　　　　　type: "POST",
　　　　　　data: formData,
　　　　　　contentType: false,
　　　　　　processData: false,
　　　　　　mimeType: "multipart/form-data",
　　　　　　success: function (res) {
　　　　　　　　layer.msg('更新頭像'+str+'成功');
　　　　　　　　_this.img[0].url = 'https://cxz.cn/nodeJs/photo/' + str;
　　　　　　　　_this.img[0].title = str;
　　　　　　})

　　}
}
</script>

注：請求數據成功更改圖片路徑，像本例子是數組，直接傳個對象或者push給他，他數組雖然變了，但是他div綁定的值不會變化，所以我只好對數組的第一個的url、title屬性分別賦值，div那綁定的圖片數組就會發生改變

但是上面這樣寫有個缺陷：動態修改圖片路徑失效，比如我存在數據庫的一張圖片，然后在創建時(created)想讀數據庫拿到照片替換以前的照片，發現插件失效，無法放大，所以v-viewer動態改變失效，網上說new Viewer實例然后update更新一下，但是我new Viewer就報錯了，感覺是版本關系，但刪除版本重新下載個1.2.0還是報錯，於是尋找別的解決方案如下：

 <div class="images" id="abcd" v-viewer> <img :src="photo"> </div> 

photo: '../../static/image/aze.jpg',

直接在div上添加v-viewer然后里面包住img，然后修改photo圖片的路徑就可以解決動態修改圖片插件失效

網上還說要用數組來遍歷，現在直接放一個字符串即可，因為我只有一張，若多張請采用數組遍歷

v-viewer數組循環圖片：https://segmentfault.com/a/1190000016584946

上面的v-viewer本博主用的很不錯，當然還有其他插件大家也可以去嘗試一下

適用於移動端 的圖片預覽插件 vue-photo-preview

vue2-preview：https://www.jianshu.com/p/37ff607ad2b4

借鑒：https://www.jianshu.com/p/e3350aa1b0d0