feat(StudyDetailPage): 添加复制文件地址功能按钮
在文件列表项中添加复制地址按钮,方便用户快速复制文件链接 实现现代浏览器和旧浏览器的兼容方案
Showing
1 changed file
with
48 additions
and
2 deletions
| ... | @@ -534,11 +534,20 @@ | ... | @@ -534,11 +534,20 @@ |
| 534 | </div> | 534 | </div> |
| 535 | <div class="flex-1 min-w-0"> | 535 | <div class="flex-1 min-w-0"> |
| 536 | <h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">{{ file.title || file.name }}</h3> | 536 | <h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">{{ file.title || file.name }}</h3> |
| 537 | - <div class="flex items-center gap-4 text-sm text-gray-600"> | 537 | + <div class="flex items-center justify-between gap-4 text-sm text-gray-600"> |
| 538 | <div class="flex items-center gap-1"> | 538 | <div class="flex items-center gap-1"> |
| 539 | <van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/> | 539 | <van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/> |
| 540 | <span>{{ getFileType(file.title || file.name) }}</span> | 540 | <span>{{ getFileType(file.title || file.name) }}</span> |
| 541 | </div> | 541 | </div> |
| 542 | + <!-- 复制地址按钮 --> | ||
| 543 | + <button | ||
| 544 | + @click="copyFileUrl(file.url)" | ||
| 545 | + class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded transition-colors" | ||
| 546 | + title="复制文件地址" | ||
| 547 | + > | ||
| 548 | + <van-icon name="link" size="12" /> | ||
| 549 | + <span>复制地址</span> | ||
| 550 | + </button> | ||
| 542 | </div> | 551 | </div> |
| 543 | </div> | 552 | </div> |
| 544 | </div> | 553 | </div> |
| ... | @@ -1252,7 +1261,44 @@ const downloadFailInfo = ref({ | ... | @@ -1252,7 +1261,44 @@ const downloadFailInfo = ref({ |
| 1252 | const showMaterialsPopup = ref(false); | 1261 | const showMaterialsPopup = ref(false); |
| 1253 | 1262 | ||
| 1254 | /** | 1263 | /** |
| 1255 | - * 复制文件URL到剪贴板 | 1264 | + * 复制文件地址到剪贴板 |
| 1265 | + * @param {string} url - 要复制的文件地址 | ||
| 1266 | + */ | ||
| 1267 | +const copyFileUrl = async (url) => { | ||
| 1268 | + try { | ||
| 1269 | + if (navigator.clipboard && window.isSecureContext) { | ||
| 1270 | + // 现代浏览器支持的方式 | ||
| 1271 | + await navigator.clipboard.writeText(url); | ||
| 1272 | + showToast('文件地址已复制到剪贴板'); | ||
| 1273 | + } else { | ||
| 1274 | + // 兼容旧浏览器的方式 | ||
| 1275 | + const textArea = document.createElement('textarea'); | ||
| 1276 | + textArea.value = url; | ||
| 1277 | + textArea.style.position = 'fixed'; | ||
| 1278 | + textArea.style.left = '-999999px'; | ||
| 1279 | + textArea.style.top = '-999999px'; | ||
| 1280 | + document.body.appendChild(textArea); | ||
| 1281 | + textArea.focus(); | ||
| 1282 | + textArea.select(); | ||
| 1283 | + | ||
| 1284 | + try { | ||
| 1285 | + document.execCommand('copy'); | ||
| 1286 | + showToast('文件地址已复制到剪贴板'); | ||
| 1287 | + } catch (err) { | ||
| 1288 | + console.error('复制失败:', err); | ||
| 1289 | + showToast('复制失败,请手动复制地址'); | ||
| 1290 | + } finally { | ||
| 1291 | + document.body.removeChild(textArea); | ||
| 1292 | + } | ||
| 1293 | + } | ||
| 1294 | + } catch (err) { | ||
| 1295 | + console.error('复制到剪贴板失败:', err); | ||
| 1296 | + showToast('复制失败,请手动复制地址'); | ||
| 1297 | + } | ||
| 1298 | +}; | ||
| 1299 | + | ||
| 1300 | +/** | ||
| 1301 | + * 复制到剪贴板 | ||
| 1256 | * @param {string} url - 要复制的URL | 1302 | * @param {string} url - 要复制的URL |
| 1257 | */ | 1303 | */ |
| 1258 | const copyToClipboard = async (url) => { | 1304 | const copyToClipboard = async (url) => { | ... | ... |
-
Please register or login to post a comment