perf: 文件预览不能滚动的问题

This commit is contained in:
kuaifan 2021-12-30 10:34:52 +08:00
parent b9f788fbe8
commit b59549ebe9
4 changed files with 64 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="preview"> <div ref="preview" class="markdown-preview-warp">
<div <div
:class="`markdown-preview ${'markdown-theme-' + theme}`" :class="`markdown-preview ${'markdown-theme-' + theme}`"
v-html="html" v-html="html"

View File

@ -62,7 +62,7 @@
<OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail"/> <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail"/>
</div> </div>
</template> </template>
<div v-if="loadContent > 0 || previewLoad" class="content-load"><Loading/></div> <div v-if="contentLoad" class="content-load"><Loading/></div>
</div> </div>
</template> </template>
@ -182,6 +182,10 @@ export default {
return this.contentBak == $A.jsonStringify(this.contentDetail); return this.contentBak == $A.jsonStringify(this.contentDetail);
}, },
contentLoad() {
return this.loadContent > 0 || this.previewLoad;
},
isPreview() { isPreview() {
return this.contentDetail && this.contentDetail.preview === true; return this.contentDetail && this.contentDetail.preview === true;
}, },

View File

@ -1,11 +1,15 @@
<template> <template>
<div class="file-content"> <div class="file-preview">
<iframe v-if="isPreview" ref="myPreview" class="preview-iframe" :src="previewUrl"></iframe> <iframe v-if="isPreview" ref="myPreview" class="preview-iframe" :src="previewUrl"></iframe>
<template v-else> <template v-else>
<div v-show="!['word', 'excel', 'ppt'].includes(file.type)" class="edit-header"> <div v-show="!['word', 'excel', 'ppt'].includes(file.type)" class="edit-header">
<div class="header-title"> <div class="header-title">
{{formatName(file)}} {{formatName(file)}}
<Tag color="default">{{$L('只读')}}</Tag> <Tag color="default">{{$L('只读')}}</Tag>
<div class="refresh">
<Loading v-if="contentLoad"/>
<Icon v-else type="ios-refresh" @click="getContent" />
</div>
</div> </div>
<Dropdown v-if="file.type=='mind' || file.type=='flow' || file.type=='sheet'" <Dropdown v-if="file.type=='mind' || file.type=='flow' || file.type=='sheet'"
trigger="click" trigger="click"
@ -35,7 +39,7 @@
<OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :code="code" readOnly/> <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :code="code" readOnly/>
</div> </div>
</template> </template>
<div v-if="loadContent > 0 || previewLoad" class="content-load"><Loading/></div> <div v-if="contentLoad" class="content-load"><Loading/></div>
</div> </div>
</template> </template>
@ -69,7 +73,6 @@ export default {
data() { data() {
return { return {
loadContent: 0, loadContent: 0,
loadIng: 0,
contentDetail: null, contentDetail: null,
loadPreview: true, loadPreview: true,
} }
@ -96,6 +99,10 @@ export default {
}, },
computed: { computed: {
contentLoad() {
return this.loadContent > 0 || this.previewLoad;
},
isPreview() { isPreview() {
return this.contentDetail && this.contentDetail.preview === true; return this.contentDetail && this.contentDetail.preview === true;
}, },
@ -128,7 +135,6 @@ export default {
this.contentDetail = $A.cloneJSON(this.file); this.contentDetail = $A.cloneJSON(this.file);
return; return;
} }
this.loadIng++;
this.loadContent++; this.loadContent++;
this.$store.dispatch("call", { this.$store.dispatch("call", {
url: 'file/content', url: 'file/content',
@ -136,12 +142,10 @@ export default {
id: this.code || this.file.id, id: this.code || this.file.id,
}, },
}).then(({data}) => { }).then(({data}) => {
this.loadIng--;
this.loadContent--; this.loadContent--;
this.contentDetail = data.content; this.contentDetail = data.content;
}).catch(({msg}) => { }).catch(({msg}) => {
$A.modalError(msg); $A.modalError(msg);
this.loadIng--;
this.loadContent--; this.loadContent--;
}) })
}, },

View File

@ -1,4 +1,5 @@
.file-content { .file-content,
.file-preview {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -54,9 +55,6 @@
color: #000000; color: #000000;
} }
} }
.ivu-tag {
margin-left: 4px;
}
} }
.header-user { .header-user {
margin-right: 24px; margin-right: 24px;
@ -206,6 +204,51 @@
} }
} }
} }
.file-preview {
.edit-header {
.header-title {
display: flex;
align-items: center;
.ivu-tag {
margin-left: 6px;
padding: 0 6px;
line-height: 20px;
}
.refresh {
display: flex;
align-items: center;
margin-left: 6px;
.common-loading {
margin: 2px;
width: 16px;
height: 16px;
}
> i {
opacity: 0.6;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
&:hover {
opacity: 1;
}
}
}
}
}
.content-body {
overflow: hidden;
.markdown-preview-warp {
flex: 1;
overflow: auto;
}
}
}
.luckysheet-input-box { .luckysheet-input-box {
z-index: 99999 !important; z-index: 99999 !important;
} }
@ -215,7 +258,7 @@
overflow: auto; overflow: auto;
.edit-header, .edit-header,
.content-body { .content-body {
min-width: 1200px; min-width: 900px;
} }
} }
} }