word 页面修改
This commit is contained in:
parent
04f81d279a
commit
6e702626e7
|
|
@ -17,14 +17,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="currentDocument" class="document-viewer">
|
<div v-if="currentDocument" class="document-viewer">
|
||||||
<div v-if="currentDocument.type === 'pdf'" class="embedded-viewer">
|
<div v-if="currentDocument.type === 'pdf'" class="embedded-viewer" :key="`pdf-${currentDocument.id}`">
|
||||||
<DocumentSearch :file-url="currentDocument.url" />
|
<DocumentSearch :file-url="currentDocument.url" :key="`pdf-viewer-${currentDocument.id}`" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="currentDocument.type === 'word'" class="embedded-viewer">
|
<div v-else-if="currentDocument.type === 'word'" class="embedded-viewer" :key="`word-${currentDocument.id}`">
|
||||||
<DocumentSearchWord :file-url="currentDocument.url" />
|
<DocumentSearchWord :file-url="currentDocument.url" :key="`word-viewer-${currentDocument.id}`" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer">
|
<div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer" :key="`excel-${currentDocument.id}`">
|
||||||
<DocumentExcel :file-url="currentDocument.url" />
|
<DocumentExcel :file-url="currentDocument.url" :key="`excel-viewer-${currentDocument.id}`" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="document-placeholder">
|
<div v-else class="document-placeholder">
|
||||||
<div class="placeholder-content">
|
<div class="placeholder-content">
|
||||||
|
|
@ -249,7 +249,7 @@ export default {
|
||||||
.document-item {
|
.document-item {
|
||||||
padding: 7px 16px;
|
padding: 7px 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #f1f9ff;
|
background: #fff;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
|
||||||
|
|
@ -92,9 +92,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (!this.docUrl) {
|
// 优先使用 fileUrl prop,然后是路由参数,最后是默认 URL
|
||||||
const initialUrl = this.fileUrl || this.$route?.query?.url || DEFAULT_DOC_URL
|
const initialUrl = this.fileUrl || this.$route?.query?.url || DEFAULT_DOC_URL
|
||||||
|
if (initialUrl && initialUrl !== this.docUrl) {
|
||||||
this.applyDocUrl(initialUrl)
|
this.applyDocUrl(initialUrl)
|
||||||
|
} else if (this.docUrl && !this.docRendered) {
|
||||||
|
// 如果 docUrl 已设置但文档未渲染,重新加载
|
||||||
|
this.loadDocument()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|
@ -104,9 +108,16 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
fileUrl: {
|
fileUrl: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal) {
|
handler(newVal, oldVal) {
|
||||||
if (newVal) {
|
// 当 fileUrl 变化时,总是重新加载文档
|
||||||
|
if (newVal && newVal !== oldVal) {
|
||||||
this.applyDocUrl(newVal)
|
this.applyDocUrl(newVal)
|
||||||
|
} else if (newVal && !this.docUrl) {
|
||||||
|
// 如果新值存在但 docUrl 为空,也加载
|
||||||
|
this.applyDocUrl(newVal)
|
||||||
|
} else if (!newVal && this.docUrl) {
|
||||||
|
// 如果新值为空但 docUrl 有值,重置状态
|
||||||
|
this.resetViewerState()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -134,12 +145,16 @@ export default {
|
||||||
},
|
},
|
||||||
applyDocUrl(url) {
|
applyDocUrl(url) {
|
||||||
const resolved = url || ''
|
const resolved = url || ''
|
||||||
if (resolved === this.docUrl) {
|
// 如果 URL 相同且文档已渲染,不重复加载
|
||||||
if (resolved) {
|
if (resolved === this.docUrl && this.docRendered) {
|
||||||
this.loadDocument()
|
|
||||||
}
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
// 如果 URL 变化,先取消之前的请求和重置状态
|
||||||
|
if (resolved !== this.docUrl) {
|
||||||
|
this.cancelFetch()
|
||||||
|
this.cancelScrollAnimation()
|
||||||
|
this.resetViewerState()
|
||||||
|
}
|
||||||
this.docUrl = resolved
|
this.docUrl = resolved
|
||||||
if (this.docUrl) {
|
if (this.docUrl) {
|
||||||
this.loadDocument()
|
this.loadDocument()
|
||||||
|
|
@ -1405,7 +1420,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.state-icon {
|
.state-icon {
|
||||||
font-size: 48px;
|
font-size: 24px;
|
||||||
color: #409EFF;
|
color: #409EFF;
|
||||||
animation: rotate 1s linear infinite;
|
animation: rotate 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue