From 52a706843c7112beb548896fe1e49c3199dabd60 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:41:00 +0800 Subject: [PATCH] =?UTF-8?q?\"feat:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E5=9B=BE=E7=89=87=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E4=BA=A4=E4=BA=92=EF=BC=8C=E4=BD=BF=E7=94=A8=E8=A7=A6=E6=91=B8?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=9B=BF=E4=BB=A3=E9=BC=A0=E6=A0=87=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 113 +++++++++++++++++++++++++++--- 1 file changed, 103 insertions(+), 10 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a3348f6..177e59b 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -95,6 +95,35 @@ onMounted(() => { handleInput(); }); } + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); }) }, 0) }) @@ -735,6 +764,7 @@ const insertImage = () => { deleteBtn.style.zIndex = '10' deleteBtn.style.display = 'none' // 默认隐藏 deleteBtn.style.transition = 'opacity 0.2s ease' + deleteBtn.style.touchAction = 'manipulation' // 优化触摸体验 // 将图片和删除按钮添加到容器中 imgContainer.appendChild(img) @@ -798,13 +828,29 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 - imgContainer.addEventListener('mouseenter', function() { - deleteBtn.style.display = 'block'; + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + imgContainer.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); - imgContainer.addEventListener('mouseleave', function() { - deleteBtn.style.display = 'none'; + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + imgContainer.addEventListener('click', function(e) { + 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') @@ -1444,13 +1490,31 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 - container.addEventListener('mouseenter', function() { - if (deleteBtn) deleteBtn.style.display = 'block'; + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); - container.addEventListener('mouseleave', function() { - if (deleteBtn) deleteBtn.style.display = 'none'; + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); img.setAttribute('data-touch-listeners', 'true') @@ -1504,6 +1568,35 @@ defineExpose({ handleInput(); }); } + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); }) }, 0) } catch (error) {