vue+viewer.js图片预览（隐藏的图片预览）

css

.viewer-toolbar ul{
   display: inline-flex;
}

html

<ul id="files" style="display: none">
   <template v-for="file in files">
      <li><img :src="'../../sgccFiles/'+file.thumbnail" :data-original="'../../sgccFiles/'+file.file_name"></li>
   </template>
</ul>

js

var vm = new Vue({
   el: '#files',
   data: {
      files:[]
   }
});

var viewer=null;

$.post(baseURL,{ycsb_id:ycsb_id},function (data) {
   vm.files=data.files;
   vm.$nextTick(function () {
      //$('#ycsbUl').viewer({url: 'data-original'});
      //$('#ycsbUl').viewer(0);
      if(viewer!=null&&viewer!=undefined){
         viewer.destroy();
      }
      var galley = document.getElementById('files');
      viewer = new Viewer(galley, {
         url: 'data-original',
         title: "",
         zoomable: true,
         movable: true,
         backdrop: true,
         zoomRatio: 0.4,  //鼠标滚动时的缩放比例
         tooltip: true,
         toolbar: true,
         fullscreen: false,
         button: true,
      });
      //debugger;
      viewer.view();
   });
});