manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复图片查看问题

Browse Source
This commit is contained in:
暮光：城中城
2023-04-01 17:49:53 +08:00
parent d2ff37c7f6
commit be8dae345c
2 changed files with 35 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
zyplayer-doc-ui/wiki-ui/src/views/page/Show.vue
View File

@@ -172,14 +172,13 @@
<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>
<div ref="imagePreviewRef">
<el-image-viewer <el-image-viewer
v-if="showImagePreview" v-if="showImagePreview"
:url-list="showImagePreviewList" :url-list="showImagePreviewList"
:on-close="closeImagePreview"
:initial-index="previewInitialIndex" :initial-index="previewInitialIndex"
@close="closeImagePreview"
hide-on-click-modal
/> />
</div>
<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank"> <form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/> <input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
</form> </form>
@@ -602,19 +601,6 @@ const previewPageImage = () => {
previewInitialIndex.value = index previewInitialIndex.value = index
showImagePreviewList.value = imgArr showImagePreviewList.value = imgArr
showImagePreview.value = true showImagePreview.value = true
setTimeout(() => initImageViewerMask(), 0)
}
})
}
let imagePreviewRef = ref();
const initImageViewerMask = () => {
// 图片预览遮罩点击隐藏预览框
let imageViewerMask = imagePreviewRef.value.querySelectorAll(
'.el-image-viewer__mask'
)
imageViewerMask.forEach((item) => {
item.onclick = () => {
showImagePreview.value = false
} }
}) })
} }

65
zyplayer-doc-ui/wiki-ui/src/views/page/share/pc/View.vue
View File

@@ -32,13 +32,13 @@
<Navigation :heading="navigationList"></Navigation> <Navigation :heading="navigationList"></Navigation>
</el-col> </el-col>
</el-row> </el-row>
<div ref="imagePreviewRef"> <el-image-viewer
<el-image-viewer v-if="showImagePreview" v-if="showImagePreview"
:url-list="showImagePreviewList" :url-list="showImagePreviewList"
:on-close="closeImagePreview" :initial-index="previewInitialIndex"
:initial-index="previewInitialIndex"> @close="closeImagePreview"
</el-image-viewer> hide-on-click-modal
</div> />
</div> </div>
</template> </template>
@@ -105,61 +105,50 @@ const loadPageDetail = (pageId) => {
}) })
} }
const initQueryParam = (to) => { const initQueryParam = (to) => {
spaceUuid.value = to.query.space spaceUuid.value = to.query.space;
nowPageId.value = to.query.pageId nowPageId.value = to.query.pageId;
if (!!nowPageId.value) { if (!!nowPageId.value) {
loadPageDetail(nowPageId.value) loadPageDetail(nowPageId.value);
} }
} }
const computeFileSize = (fileSize) => { const computeFileSize = (fileSize) => {
if (!fileSize) { if (!fileSize) {
return '-' return '-';
} }
let size = '' let size = '';
if (fileSize < 0.1 * 1024) { if (fileSize < 0.1 * 1024) {
size = fileSize.toFixed(2) + 'B' size = fileSize.toFixed(2) + 'B';
} else if (fileSize < 0.1 * 1024 * 1024) { } else if (fileSize < 0.1 * 1024 * 1024) {
size = (fileSize / 1024).toFixed(2) + 'KB' size = (fileSize / 1024).toFixed(2) + 'KB';
} else if (fileSize < 0.1 * 1024 * 1024 * 1024) { } else if (fileSize < 0.1 * 1024 * 1024 * 1024) {
size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB' size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
} else { } else {
size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB' size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
} }
let sizeStr = size + '' let sizeStr = size + '';
let index = sizeStr.indexOf('.') let index = sizeStr.indexOf('.');
let dou = sizeStr.substr(index + 1, 2) let dou = sizeStr.substr(index + 1, 2);
if (dou == '00') { if (dou == '00') {
return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
} }
return size return size;
} }
const closeImagePreview = () => { const closeImagePreview = () => {
showImagePreview.value = false showImagePreview.value = false;
} }
let pageContentRef = ref(); let pageContentRef = ref();
const previewPageImage = () => { const previewPageImage = () => {
const imgArr = [] const imgArr = [];
const imgSelector = pageContentRef.value.querySelectorAll('img') const imgSelector = pageContentRef.value.querySelectorAll('img');
imgSelector.forEach((item, index) => { imgSelector.forEach((item, index) => {
imgArr.push(item.src) imgArr.push(item.src);
item.onclick = () => { item.onclick = () => {
previewInitialIndex.value = index previewInitialIndex.value = index;
showImagePreviewList.value = imgArr showImagePreviewList.value = imgArr;
showImagePreview.value = true showImagePreview.value = true;
setTimeout(() => initImageViewerMask.value(), 0)
} }
}) })
} }
let imagePreviewRef = ref();
const initImageViewerMask = () => {
// 图片预览遮罩点击隐藏预览框
let imageViewerMask = imagePreviewRef.value.querySelectorAll(
'.el-image-viewer__mask'
)
imageViewerMask.forEach((item) => {
item.onclick = () => (showImagePreview.value = false)
})
}
</script> </script>
<style> <style>