fix(H5): 修复消息输入框无法粘贴图片/文件问题
- 移除 handleDocPaste 中对 target 的检查 - 添加优先使用 clipboardData.files 的逻辑 - 修复 van-field @paste 在某些 H5 环境下不触发的问题
This commit is contained in:
@@ -172,12 +172,30 @@ onUnmounted(() => {
|
||||
/**
|
||||
* Document 级别粘贴处理(备用方案)
|
||||
* 做什么:捕获 van-field @paste 未处理的文件粘贴
|
||||
* 说明:移除 target 检查,让 handleDocPaste 作为后备方案处理所有文件粘贴
|
||||
*/
|
||||
async function handleDocPaste(event: ClipboardEvent): Promise<void> {
|
||||
// 如果事件目标是输入框,说明 @paste 已经处理,跳过
|
||||
const target = event.target as HTMLElement
|
||||
if (target.tagName === 'TEXTAREA' || target.isContentEditable) return
|
||||
// 不再检查 target 是否为 textarea
|
||||
// 原因:van-field 的 @paste 事件在某些 H5 环境下可能不触发
|
||||
// 此时 document 级别的监听可以作为后备方案
|
||||
|
||||
// 优先使用 clipboardData.files(兼容性更好)
|
||||
const files = event.clipboardData?.files
|
||||
if (files && files.length > 0) {
|
||||
event.preventDefault()
|
||||
console.log('[InputBar] Document级别粘贴检测到文件, 数量:', files.length)
|
||||
|
||||
for (const file of Array.from(files)) {
|
||||
if (file.type.startsWith('image/')) {
|
||||
await handleImageUpload(file)
|
||||
} else {
|
||||
await handleFileUpload(file)
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 兼容 clipboardData.items
|
||||
const items = event.clipboardData?.items
|
||||
if (!items) return
|
||||
|
||||
|
||||
Reference in New Issue
Block a user