gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/components/MDEditor/components/preview/index.vue
View File

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

6
resources/assets/js/pages/manage/components/FileContent.vue
View File

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

16
resources/assets/js/pages/manage/components/FilePreview.vue
View File

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

53
resources/assets/sass/pages/components/file-content.scss vendored
View File

@ -1,4 +1,5 @@
.file-content {
.file-content,
.file-preview {
position: absolute;
top: 0;
left: 0;
@ -54,9 +55,6 @@
color: #000000;
}
}
.ivu-tag {
margin-left: 4px;
}
}
.header-user {
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 {
z-index: 99999 !important;
}
@ -215,7 +258,7 @@
overflow: auto;
.edit-header,
.content-body {
min-width: 1200px;
min-width: 900px;
}
}
}