From be97920e8afbddaa8989bf02c95b166bc5184168 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:47:00 +0800 Subject: [PATCH] =?UTF-8?q?\"fix:=20=E6=94=B9=E8=BF=9B=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E5=9B=BE=E7=89=87=E4=BA=A4=E4=BA=92=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=92=8C=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 126 +++++++++++++++++++++++++++--- 1 file changed, 116 insertions(+), 10 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index e8cfc91..e4aea1c 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -117,6 +117,46 @@ onMounted(() => { } } }); + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchend', function(e) { + // 检查是否为轻触（非拖拽） + if (!dragState.value.isLongPress && dragState.value.longPressTimer) { + // 清除长按定时器 + clearTimeout(dragState.value.longPressTimer); + dragState.value.longPressTimer = null; + + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchend', function(e) { + // 检查是否为轻触（非拖拽） + if (!dragState.value.isLongPress && dragState.value.longPressTimer) { + // 清除长按定时器 + clearTimeout(dragState.value.longPressTimer); + dragState.value.longPressTimer = null; + + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); }) }, 0) }) @@ -748,16 +788,7 @@ const insertImage = () => { const deleteBtn = document.createElement('img') deleteBtn.src = '/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png' deleteBtn.className = 'image-delete-btn' - deleteBtn.style.position = 'absolute' - deleteBtn.style.top = '8px' - deleteBtn.style.right = '8px' - deleteBtn.style.width = '24px' - deleteBtn.style.height = '24px' - deleteBtn.style.cursor = 'pointer' - deleteBtn.style.zIndex = '10' - deleteBtn.style.display = 'none' // 默认隐藏 - deleteBtn.style.transition = 'opacity 0.2s ease' - deleteBtn.style.touchAction = 'manipulation' // 优化触摸体验 + deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 10; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' // 将图片和删除按钮添加到容器中 imgContainer.appendChild(img) @@ -829,6 +860,24 @@ const insertImage = () => { } }); + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + imgContainer.addEventListener('touchend', function(e) { + // 检查是否为轻触（非拖拽） + if (!dragState.value.isLongPress && dragState.value.longPressTimer) { + // 清除长按定时器 + clearTimeout(dragState.value.longPressTimer); + dragState.value.longPressTimer = null; + + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); + console.log('Added touch event listeners') // 插入图片容器到当前光标位置 @@ -1015,6 +1064,43 @@ const handleTouchStart = (e) => { e.preventDefault() }, 300) // 300毫秒长按触发拖拽 } + + // 添加拖拽指示器 + const indicator = document.createElement('div') + indicator.className = 'drag-indicator' + indicator.style.position = 'fixed' + indicator.style.top = '50%' + indicator.style.left = '50%' + indicator.style.transform = 'translate(-50%, -50%)' + indicator.style.padding = '8px 16px' + indicator.style.background = 'rgba(0, 0, 0, 0.8)' + indicator.style.color = 'white' + indicator.style.borderRadius = '16px' + indicator.style.fontSize = '14px' + indicator.style.fontWeight = '500' + indicator.style.zIndex = '1000' + indicator.style.opacity = '0' + indicator.style.transition = 'opacity 0.15s ease-out' + indicator.textContent = '拖拽排序' + document.body.appendChild(indicator) + + // 渐显指示器 + setTimeout(() => { + indicator.style.opacity = '1' + }, 5) + + // 保存指示器引用以便后续移除 + dragState.value.indicator = indicator + + // 添加震动反馈（如果设备支持） + if (navigator.vibrate) { + navigator.vibrate(10) + } + + // 阻止页面滚动 + e.preventDefault() + }, 300) // 300毫秒长按触发拖拽 +} // 处理触摸移动事件 const handleTouchMove = (e) => { @@ -1591,6 +1677,26 @@ defineExpose({ } } }); + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchend', function(e) { + // 检查是否为轻触（非拖拽） + if (!dragState.value.isLongPress && dragState.value.longPressTimer) { + // 清除长按定时器 + clearTimeout(dragState.value.longPressTimer); + dragState.value.longPressTimer = null; + + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); }) }, 0) } catch (error) {