wiki图片预览遮罩点击后隐藏预览框
This commit is contained in:
暮光：城中城
@@ -2,8 +2,8 @@
|
|||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# base api
|
# base api
|
||||||
VUE_APP_BASE_API = 'http://local.zyplayer.com:8083/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_APP_BASE_API = 'http://doc.zyplayer.com/zyplayer-doc-manage'
|
||||||
|
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|
||||||
|
|||||||
@@ -197,7 +197,9 @@
|
|||||||
<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
|
<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -488,7 +490,7 @@
|
|||||||
this.$emit('switchSpace', this.wikiPage.spaceId);
|
this.$emit('switchSpace', this.wikiPage.spaceId);
|
||||||
// 调用父方法展开目录树
|
// 调用父方法展开目录树
|
||||||
this.$emit('changeExpandedKeys', pageId);
|
this.$emit('changeExpandedKeys', pageId);
|
||||||
setTimeout(() => this.previewPageImage(), 1000);
|
setTimeout(() => this.previewPageImage(), 500);
|
||||||
});
|
});
|
||||||
this.loadCommentList(pageId);
|
this.loadCommentList(pageId);
|
||||||
this.getPageHistory(pageId, 1);
|
this.getPageHistory(pageId, 1);
|
||||||
@@ -497,13 +499,24 @@
|
|||||||
this.showImagePreview = false;
|
this.showImagePreview = false;
|
||||||
},
|
},
|
||||||
previewPageImage() {
|
previewPageImage() {
|
||||||
this.showImagePreviewList = [];
|
const imgArr = [];
|
||||||
const imgSelector = this.$refs.pageContent.querySelectorAll('img');
|
const imgSelector = this.$refs.pageContent.querySelectorAll('img');
|
||||||
imgSelector.forEach((item, index) => {
|
imgSelector.forEach((item, index) => {
|
||||||
this.showImagePreviewList.push(item.src);
|
imgArr.push(item.src);
|
||||||
item.onclick = () => {
|
item.onclick = () => {
|
||||||
this.showImagePreview = true;
|
|
||||||
this.previewInitialIndex = index;
|
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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user