hookehuyr

fix(DocumentPreview): 优化标签页切换时组件重复渲染问题

重构 getFileSize 函数,将 Promise 封装改为 async/await 以提高可读性
为 DocumentPreview 组件添加 v-if 条件渲染,避免标签页切换时所有预览组件同时加载
统一 H5 和小程序环境的文件大小获取逻辑,移除条件编译指令
...@@ -45,48 +45,41 @@ export function detectFileType(url) { ...@@ -45,48 +45,41 @@ export function detectFileType(url) {
45 * @returns {Promise<number>} 文件大小(字节) 45 * @returns {Promise<number>} 文件大小(字节)
46 */ 46 */
47 export async function getFileSize(url) { 47 export async function getFileSize(url) {
48 - return new Promise((resolve) => { 48 + // 检测运行环境
49 - // #ifdef H5 49 + const isWeapp = typeof wx !== 'undefined' || typeof my !== 'undefined'
50 - // H5 环境:使用 fetch HEAD 请求 50 +
51 - fetch(url, { method: 'HEAD' }) 51 + // 小程序环境:使用 Taro.request
52 - .then(response => { 52 + if (isWeapp) {
53 - const contentLength = response.headers.get('Content-Length') 53 + try {
54 + const Taro = (await import('@tarojs/taro')).default
55 + const res = await Taro.request({
56 + url: url,
57 + method: 'HEAD'
58 + })
59 +
60 + const contentLength = res.header['Content-Length'] || res.header['content-length']
54 if (contentLength) { 61 if (contentLength) {
55 - resolve(parseInt(contentLength, 10)) 62 + return parseInt(contentLength, 10)
56 - } else {
57 - // 无法获取大小,返回 0(将使用 web-view)
58 - resolve(0)
59 } 63 }
60 - }) 64 + } catch (err) {
61 - .catch(err => {
62 console.error('获取文件大小失败:', err) 65 console.error('获取文件大小失败:', err)
63 - // 失败时返回 0,将使用 web-view 66 + }
64 - resolve(0) 67 + return 0
65 - }) 68 + }
66 - // #endif
67 69
68 - // #ifdef WEAPP 70 + // H5 环境:使用 fetch
69 - // 小程序环境:使用 Taro.request HEAD 请求 71 + try {
70 - Taro.request({ 72 + const response = await fetch(url, { method: 'HEAD' })
71 - url: url, 73 + const contentLength = response.headers.get('Content-Length')
72 - method: 'HEAD',
73 - success: (res) => {
74 - const contentLength = res.header['Content-Length'] || res.header['content-length']
75 if (contentLength) { 74 if (contentLength) {
76 - resolve(parseInt(contentLength, 10)) 75 + return parseInt(contentLength, 10)
77 - } else {
78 - // 无法获取大小,返回 0(将使用 web-view)
79 - resolve(0)
80 } 76 }
81 - }, 77 + } catch (err) {
82 - fail: (err) => {
83 console.error('获取文件大小失败:', err) 78 console.error('获取文件大小失败:', err)
84 - // 失败时返回 0,将使用 web-view
85 - resolve(0)
86 } 79 }
87 - }) 80 +
88 - // #endif 81 + // 无法获取大小,返回 0(将使用 web-view)
89 - }) 82 + return 0
90 } 83 }
91 84
92 /** 85 /**
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
8 <nut-tabs v-model="activeTab"> 8 <nut-tabs v-model="activeTab">
9 <nut-tab-pane title="PDF 预览" pane-key="pdf"> 9 <nut-tab-pane title="PDF 预览" pane-key="pdf">
10 <DocumentPreview 10 <DocumentPreview
11 - src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 11 + v-if="activeTab === 'pdf'"
12 + src="https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf"
12 fileType="pdf" 13 fileType="pdf"
13 fileName="示例 PDF 文档.pdf" 14 fileName="示例 PDF 文档.pdf"
14 @rendered="handleRendered" 15 @rendered="handleRendered"
...@@ -18,6 +19,7 @@ ...@@ -18,6 +19,7 @@
18 19
19 <nut-tab-pane title="Word 预览" pane-key="word"> 20 <nut-tab-pane title="Word 预览" pane-key="word">
20 <DocumentPreview 21 <DocumentPreview
22 + v-if="activeTab === 'word'"
21 src="https://calibre-ebook.com/downloads/demos/demo.docx" 23 src="https://calibre-ebook.com/downloads/demos/demo.docx"
22 fileType="docx" 24 fileType="docx"
23 fileName="示例 Word 文档.docx" 25 fileName="示例 Word 文档.docx"
...@@ -28,6 +30,7 @@ ...@@ -28,6 +30,7 @@
28 30
29 <nut-tab-pane title="Excel 预览" pane-key="excel"> 31 <nut-tab-pane title="Excel 预览" pane-key="excel">
30 <DocumentPreview 32 <DocumentPreview
33 + v-if="activeTab === 'excel'"
31 src="https://filesamples.com/samples/document/xlsx/sample1.xlsx" 34 src="https://filesamples.com/samples/document/xlsx/sample1.xlsx"
32 fileType="xlsx" 35 fileType="xlsx"
33 fileName="示例 Excel 文档.xlsx" 36 fileName="示例 Excel 文档.xlsx"
...@@ -38,6 +41,7 @@ ...@@ -38,6 +41,7 @@
38 41
39 <nut-tab-pane title="PPT 预览" pane-key="ppt"> 42 <nut-tab-pane title="PPT 预览" pane-key="ppt">
40 <DocumentPreview 43 <DocumentPreview
44 + v-if="activeTab === 'ppt'"
41 src="https://filesamples.com/samples/document/ppt/sample1.ppt" 45 src="https://filesamples.com/samples/document/ppt/sample1.ppt"
42 fileType="ppt" 46 fileType="ppt"
43 fileName="示例 PPT 文档.ppt" 47 fileName="示例 PPT 文档.ppt"
......