Viewer.js是一个大图预览插件。附上官网地址（https://fengyuanchen.github.io/viewerjs/）

说明一下我的使用情况。点击图片查看，出大图预览

不需要有预览小图。查看官网文档，下载js文件。引入文件。

<link href="/Scripts/Common/viewer.min.css" rel="stylesheet">
<script src="/Scripts/Common/viewer.min.js"></script>

不需要预览小图的话，src标签不写地址就可以没有预览小图了。

记录一下2个问题。

A：点击多次的时候数据错乱的问题。这是因为一个页面只能有一个viewer，所以每次事件结束需要进行销毁viewer，然后重新新建就可以。

B：异步数据填充的时候，数据拿到的顺序影响了渲染，所以导致第一次点击照片无法显示，但是console.log能打印出自己需要展示的数组（因为console.log不是立即执行的），这是因为顺序问题，如果出现这个问题的话，是第一次new viewer的顺序在拿到数据之前。解决办法在vue里面就是使用this.$nextTick(()=>{}) 

附上代码：

HTML：

 <el-table-column label="照片" align='center' fixed="right">
      <template slot-scope="scope">
           <el-button type="text" size="small" v-on:click="lookDetail(scope.row)">查看</el-button>
      </template>
  </el-table-column>
 
 <div class='elImage' v-show="centerDialogVisible">
        <ul id='viewer'>
            <li v-for="(item,index) in photo1" :key="index">
                <img class="user-avatar" :data-original='item'  src="">
            </li>
        </ul>
    </div>

js:

data(){
    return{
        photo1: [], // 图片地址
    }
},
mounted: function () {
    this.GetAssetList(this.searchForm)   //根据查询条件进来拿到列表
},
methods:{
     GetAssetList(){ //获取table里面的数据，包括照片地址
         
     },
      lookDetail: function (row) {
                var that = this
                that.photo1 = row.photo
                // 必须使用this.$nextTick！否则第一次点击没有图片展示！
                that.$nextTick(function(){
                  var viewer = new Viewer(document.getElementById('viewer'),{
                    url: 'data-original',
                    navbar: false,
                    fullscreen: false,
                    hide:function(){ //在图片消失的时候销毁viewer
                        viewer.destroy()
                    }
                 });
                 viewer.show()
                })
            },
}

以上！