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

28
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>
</div>
</el-dialog>
<div ref="imagePreviewRef">
<el-image-viewer
v-if="showImagePreview"
:url-list="showImagePreviewList"
:on-close="closeImagePreview"
:initial-index="previewInitialIndex"
/>
</div>
<el-image-viewer
v-if="showImagePreview"
:url-list="showImagePreviewList"
:initial-index="previewInitialIndex"
@close="closeImagePreview"
hide-on-click-modal
/>
<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
</form>
@@ -602,19 +601,6 @@ const previewPageImage = () => {
previewInitialIndex.value = index
showImagePreviewList.value = imgArr
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
}
})
}

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

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