perf: 优化office加载提示

This commit is contained in:
kuaifan 2021-12-26 01:00:49 +08:00
parent 1fae364e7d
commit a486eefd81
3 changed files with 37 additions and 11 deletions

View File

@ -227,8 +227,8 @@
} }
}, },
htmlOk() { htmlOk() {
$A.loadScript('js/html2md.js', () => { $A.loadScript('js/html2md.js', (e) => {
if (typeof toMarkdown !== 'function') { if (e !== null || typeof toMarkdown !== 'function') {
$A.modalAlert("组件加载失败!"); $A.modalAlert("组件加载失败!");
return; return;
} }

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="component-only-office"> <div class="component-only-office">
<div :id="this.id" class="placeholder"></div> <div :id="this.id" class="placeholder"></div>
<div class="office-loading"><Loading v-if="loadIng > 0"/></div>
</div> </div>
</template> </template>
@ -19,6 +20,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.office-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
} }
</style> </style>
<script> <script>
@ -44,6 +56,8 @@ export default {
data() { data() {
return { return {
loadIng: 0,
fileName: null, fileName: null,
fileType: null, fileType: null,
fileUrl: null, fileUrl: null,
@ -83,7 +97,13 @@ export default {
if (!url) { if (!url) {
return; return;
} }
$A.loadScript(this.$store.state.method.apiUrl("../office/web-apps/apps/api/documents/api.js"), () => { this.loadIng++;
$A.loadScript(this.$store.state.method.apiUrl("../office/web-apps/apps/api/documents/api.js"), (e) => {
this.loadIng--;
if (e !== null) {
$A.modalAlert("组件加载失败!");
return;
}
this.loadFile() this.loadFile()
}) })
}, },

View File

@ -923,7 +923,7 @@
return; return;
} }
if (this.__loadScript[url] === true) { if (this.__loadScript[url] === true) {
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
return; return;
} }
let script = document.createElement("script"); let script = document.createElement("script");
@ -933,13 +933,16 @@
if (script.readyState === "loaded" || script.readyState === "complete") { if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null; script.onreadystatechange = null;
this.__loadScript[url] = true; this.__loadScript[url] = true;
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
} }
}; };
} else { } else {
script.onload = () => { script.onload = () => {
this.__loadScript[url] = true; this.__loadScript[url] = true;
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
};
script.onerror = (e) => {
typeof callback === "function" && callback(e);
}; };
} }
if (this.rightExists(url, '.js')) { if (this.rightExists(url, '.js')) {
@ -955,7 +958,7 @@
if (++i < urls.length) { if (++i < urls.length) {
this.loadScript(urls[i], recursiveCallback) this.loadScript(urls[i], recursiveCallback)
} else { } else {
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
} }
} }
this.loadScript(urls[0], recursiveCallback); this.loadScript(urls[0], recursiveCallback);
@ -974,7 +977,7 @@
return; return;
} }
if (this.__loadCss[url] === true) { if (this.__loadCss[url] === true) {
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
return; return;
} }
let script = document.createElement('link'); let script = document.createElement('link');
@ -983,16 +986,19 @@
if (script.readyState == 'loaded' || script.readyState == 'complete') { if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null; script.onreadystatechange = null;
this.__loadCss[url] = true; this.__loadCss[url] = true;
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
} }
}; };
} else { } else {
script.onload = () => { script.onload = () => {
this.__loadCss[url] = true; this.__loadCss[url] = true;
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
}; };
script.onerror = (e) => {
typeof callback === "function" && callback(e);
};
} }
script.rel = 'stylesheet'; script.rel = 'stylesheet';
if (this.rightExists(url, '.css')) { if (this.rightExists(url, '.css')) {
@ -1008,7 +1014,7 @@
if (++i < urls.length) { if (++i < urls.length) {
this.loadCss(urls[i], recursiveCallback) this.loadCss(urls[i], recursiveCallback)
} else { } else {
typeof callback === "function" && callback(); typeof callback === "function" && callback(null);
} }
} }
this.loadCss(urls[0], recursiveCallback); this.loadCss(urls[0], recursiveCallback);