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"});
},