viewerjs使用及问题解决方法

1.多次点击时图片不显示，只有遮挡框，或者是点击多次后，会形成多个遮挡框。

  <el-form-item label="图片" prop="imgUrl" v-if="fileList!=null && fileList.length!=0">
            <div id="imageUrls">
              <img v-for="(item,index) in fileList" :src="item" :key="index" height="100"/>
            </div>
          </el-form-item>

增加v-if判断，该情况消失。看网上有说 调用一下.destroy()方法，但是我调用了没管用。

v-if="fileList!=null && fileList.length!=0"

2.点击后，图片显示在dialog框后面。

这是由于图层显示问题，官网文档显示默认值是2015，手动设置一下。

      /**
       *@description 初始化viewer插件
       */
      initImageTools() {
        //初始化 viewerjs
        //  new Viewer(document.getElementById('imageUrls')).destroy();
        const ViewerDom = document.getElementById('imageUrls');
        new Viewer(ViewerDom, {
          // 相关配置项,详情见下面
          zIndex: 3018,
        });
        const viewer = new Viewer(ViewerDom, {url: "src"});
      },

增加  zIndex: 3018配置，其余全部是默认的。根据自己的项目去配置

 

具体相关代码：

   <el-dialog title="预览" @close="closeDialogSource"
                 :visible.sync="dialogVisibleSourceImg" :close-on-click-modal="modalVisible">
        <div style="text-align: center" v-if="sourceMediaImgUrl!=null && sourceMediaImgUrl.length!=0">
          <div id="imageUrlsCourseSource"><img :src="sourceMediaImgUrl" height="200"></div>
        </div>
      </el-dialog>

  //图片预览
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'viewerjs'

  /**
       *@description 素材预览
       */
      viewSource(row) {
        let _this = this;        
          //图片
          _this.sourceMediaImgUrl = row.mediaUrl;
          _this.dialogVisibleSourceImg = true;
          this.$nextTick(() => {
            //重点：要在图片已经请求到再调用！！
            _this.initImageTools();
          })    
      },
   /**
       *@description 初始化viewer插件
       */
      initImageTools() {
        //初始化 viewerjs
        const ViewerDom = document.getElementById('imageUrlsCourseSource');
        new Viewer(ViewerDom, {
          // 相关配置项,详情见下面
          zIndex: 3018,
        });
        const viewer = new Viewer(ViewerDom, {url: "src"});
      },