diff --git a/apps/demo/src/pages/DocxViewerPage.vue b/apps/demo/src/pages/DocxViewerPage.vue index 4487e69..f00fbac 100644 --- a/apps/demo/src/pages/DocxViewerPage.vue +++ b/apps/demo/src/pages/DocxViewerPage.vue @@ -34,6 +34,36 @@ {{ errorCode ? `${errorCode}: ` : "" }}{{ error }}

+
+ 组件 Props + + + + + + +
+
([]) let pageLoadSequence = 0 let activePageLoad: @@ -203,7 +246,7 @@ function createPageRuntime() { } const runtime = shallowRef(createPageRuntime()) -const viewerKey = computed(() => `${displayName.value}-${loadCounter.value}`) +const viewerKey = computed(() => `${displayName.value}-${loadCounter.value}-${String(defaultThumbnailsOpen.value)}`) function setError(message: string, code: string): void { error.value = message @@ -331,6 +374,12 @@ h2 { margin-bottom: 4px; } .runtime-config input[type="url"] { min-width: 280px; } .runtime-config .checkbox-label { flex-direction: row; align-items: center; } .runtime-config .checkbox-label input { padding: 0; } +.props-panel { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); } +.props-panel legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); } +.props-panel .checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--foreground); white-space: nowrap; } +.props-panel .checkbox-label input { padding: 0; } +.props-panel .select-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--foreground); } +.props-panel select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); } .error { color: #ef4444; font-size: 13px; } .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; padding: 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); font-size: 13px; } .viewer-container { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; margin-bottom: 24px; } diff --git a/docs/guide/docx.md b/docs/guide/docx.md index 4fe3261..8b12424 100644 --- a/docs/guide/docx.md +++ b/docs/guide/docx.md @@ -31,6 +31,8 @@ import "@arcships/vue-docx/style.css" | `model` | `DocModel` | 无 | 已解析文档模型 | | `runtime` | `DocxRuntime` | 组件创建 | 调用方持有的 Runtime | | `showToolbar` | `boolean` | `true` | 显示查看工具栏 | +| `showUpload` | `boolean` | `true` | 上传入口,含工具栏按钮与空态、错误态的选择文件按钮 | +| `showDownload` | `boolean` | `true` | 工具栏下载按钮 | | `defaultThumbnailsOpen` | `boolean` | `false` | 默认展开缩略图 | | `defaultZoom` | `number` | `100` | 初始缩放百分比 | | `isDark` | `boolean` | `false` | 深色界面 | diff --git a/packages/vue-docx/src/components/DocxViewer.vue b/packages/vue-docx/src/components/DocxViewer.vue index 25461bd..78ed407 100644 --- a/packages/vue-docx/src/components/DocxViewer.vue +++ b/packages/vue-docx/src/components/DocxViewer.vue @@ -27,6 +27,8 @@ :file-name="displayFileName" :is-dark="darkTheme" :sidebar-open="sidebarOpen" + :show-upload="showUpload" + :show-download="showDownload" :show-tracked-changes="effectiveShowTrackedChanges" :show-comments="effectiveShowComments" :tracked-change-count="viewerTrackedChanges.length" @@ -87,7 +89,7 @@ Unable to open this document {{ errorCode(error) }} {{ error.message }} - +
@@ -98,7 +100,7 @@
No document open {{ emptyState }} - +
@@ -141,6 +143,8 @@ const props = withDefaults( runtime?: DocxRuntime fileName?: string showToolbar?: boolean + showUpload?: boolean + showDownload?: boolean defaultThumbnailsOpen?: boolean defaultZoom?: number isDark?: boolean @@ -153,6 +157,8 @@ const props = withDefaults( emptyState: "Upload or provide a DOCX file to start.", fileName: "document.docx", showToolbar: true, + showUpload: true, + showDownload: true, defaultThumbnailsOpen: false, defaultZoom: 100, isDark: false, diff --git a/packages/vue-docx/src/components/DocxViewerToolbar.vue b/packages/vue-docx/src/components/DocxViewerToolbar.vue index f371b06..72d7d14 100644 --- a/packages/vue-docx/src/components/DocxViewerToolbar.vue +++ b/packages/vue-docx/src/components/DocxViewerToolbar.vue @@ -145,6 +145,7 @@