wiki图片预览遮罩点击后隐藏预览框

This commit is contained in:
暮光:城中城
2020-12-27 17:17:55 +08:00
parent b7654611c7
commit 3fbc7e5b38
6 changed files with 23 additions and 10 deletions

View File

@@ -2,8 +2,8 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://local.zyplayer.com:8083/zyplayer-doc-manage'
# VUE_APP_BASE_API = 'http://doc.zyplayer.com/zyplayer-doc-manage'
# VUE_APP_BASE_API = 'http://local.zyplayer.com:8083/zyplayer-doc-manage'
VUE_APP_BASE_API = 'http://doc.zyplayer.com/zyplayer-doc-manage'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@@ -197,7 +197,9 @@
<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
</div>
</el-dialog>
<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"/>
<div ref="imagePreview">
<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"/>
</div>
</div>
</template>
@@ -488,7 +490,7 @@
this.$emit('switchSpace', this.wikiPage.spaceId);
// 调用父方法展开目录树
this.$emit('changeExpandedKeys', pageId);
setTimeout(() => this.previewPageImage(), 1000);
setTimeout(() => this.previewPageImage(), 500);
});
this.loadCommentList(pageId);
this.getPageHistory(pageId, 1);
@@ -497,13 +499,24 @@
this.showImagePreview = false;
},
previewPageImage() {
this.showImagePreviewList = [];
const imgArr = [];
const imgSelector = this.$refs.pageContent.querySelectorAll('img');
imgSelector.forEach((item, index) => {
this.showImagePreviewList.push(item.src);
imgArr.push(item.src);
item.onclick = () => {
this.showImagePreview = true;
this.previewInitialIndex = index;
this.showImagePreviewList = imgArr;
this.showImagePreview = true;
setTimeout(() => this.initImageViewerMask(), 0);
}
});
},
initImageViewerMask() {
// 图片预览遮罩点击隐藏预览框
let imageViewerMask = this.$refs.imagePreview.querySelectorAll('.el-image-viewer__mask');
imageViewerMask.forEach(item => {
item.onclick = () => {
this.showImagePreview = false;
}
});
},

View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-wiki.png><title>WIKI文档管理系统</title><link href=css/chunk-009efa60.c1509684.css rel=prefetch><link href=css/chunk-32cc5643.5a5b2ca1.css rel=prefetch><link href=css/chunk-34407190.57bbfb51.css rel=prefetch><link href=css/chunk-4b763d50.edd147c5.css rel=prefetch><link href=css/chunk-5544a2b8.17d2b8a1.css rel=prefetch><link href=css/chunk-566cb39a.72393404.css rel=prefetch><link href=css/chunk-578c28a7.83c6d32d.css rel=prefetch><link href=css/chunk-5dc97978.ec6236ec.css rel=prefetch><link href=js/chunk-009efa60.dbe73c24.js rel=prefetch><link href=js/chunk-2d207ece.20edf665.js rel=prefetch><link href=js/chunk-2d20f55a.217546ad.js rel=prefetch><link href=js/chunk-32cc5643.fcf57a84.js rel=prefetch><link href=js/chunk-34407190.69ced152.js rel=prefetch><link href=js/chunk-4b763d50.e8bf0362.js rel=prefetch><link href=js/chunk-5544a2b8.774dc497.js rel=prefetch><link href=js/chunk-566cb39a.d4bb3e71.js rel=prefetch><link href=js/chunk-578c28a7.54a578cc.js rel=prefetch><link href=js/chunk-5dc97978.1238356c.js rel=prefetch><link href=css/app.3d0d405b.css rel=preload as=style><link href=css/chunk-vendors.43fc3011.css rel=preload as=style><link href=js/app.896f3b58.js rel=preload as=script><link href=js/chunk-vendors.4d2ae4cf.js rel=preload as=script><link href=css/chunk-vendors.43fc3011.css rel=stylesheet><link href=css/app.3d0d405b.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-wiki-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.4d2ae4cf.js></script><script src=js/app.896f3b58.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-wiki.png><title>WIKI文档管理系统</title><link href=css/chunk-009efa60.c1509684.css rel=prefetch><link href=css/chunk-32cc5643.5a5b2ca1.css rel=prefetch><link href=css/chunk-34407190.57bbfb51.css rel=prefetch><link href=css/chunk-4b763d50.edd147c5.css rel=prefetch><link href=css/chunk-5544a2b8.17d2b8a1.css rel=prefetch><link href=css/chunk-566cb39a.b46571a2.css rel=prefetch><link href=css/chunk-578c28a7.83c6d32d.css rel=prefetch><link href=css/chunk-5dc97978.ec6236ec.css rel=prefetch><link href=js/chunk-009efa60.dbe73c24.js rel=prefetch><link href=js/chunk-2d207ece.20edf665.js rel=prefetch><link href=js/chunk-2d20f55a.217546ad.js rel=prefetch><link href=js/chunk-32cc5643.fcf57a84.js rel=prefetch><link href=js/chunk-34407190.69ced152.js rel=prefetch><link href=js/chunk-4b763d50.e8bf0362.js rel=prefetch><link href=js/chunk-5544a2b8.774dc497.js rel=prefetch><link href=js/chunk-566cb39a.511cc571.js rel=prefetch><link href=js/chunk-578c28a7.54a578cc.js rel=prefetch><link href=js/chunk-5dc97978.1238356c.js rel=prefetch><link href=css/app.3d0d405b.css rel=preload as=style><link href=css/chunk-vendors.43fc3011.css rel=preload as=style><link href=js/app.16b7cdcd.js rel=preload as=script><link href=js/chunk-vendors.4d2ae4cf.js rel=preload as=script><link href=css/chunk-vendors.43fc3011.css rel=stylesheet><link href=css/app.3d0d405b.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-wiki-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.4d2ae4cf.js></script><script src=js/app.16b7cdcd.js></script></body></html>