From ec6f945f4e73289a5b4466f67643f5c84d0231bd Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 11:38:37 +0800 Subject: [PATCH] =?UTF-8?q?\"feat:=20=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E7=9F=AD=E6=8C=89?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA/=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 182 +++++++++++++++++------------- 1 file changed, 104 insertions(+), 78 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index ee6c94e..6ea3b1c 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,15 +96,24 @@ onMounted(() => { }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - 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'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -797,14 +806,23 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加点击事件以显示/隐藏删除按钮 - imgContainer.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + imgContainer.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + imgContainer.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } }); @@ -901,31 +919,14 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - // 获取触摸目标 - const target = e.target - - // 检查目标是否为图片容器或图片 - let imgContainer = null - let img = null - - if (target.classList.contains('image-container')) { - imgContainer = target - img = target.querySelector('.editor-image') - } else if (target.classList.contains('editor-image')) { - img = target - imgContainer = target.parentElement - } else { - // 如果触摸的不是图片或图片容器，直接返回 - return - } + const img = e.target + if (!img.classList.contains('editor-image')) return // 防止图片被选中 - if (img) { - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' - } + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -944,13 +945,11 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - if (img) { - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - } + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 添加拖拽指示器 const indicator = document.createElement('div') @@ -983,10 +982,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } + + // 阻止页面滚动 + e.preventDefault() }, 300) // 300毫秒长按触发拖拽 - - // 阻止页面滚动 - e.preventDefault() } // 处理触摸移动事件 @@ -1439,7 +1438,7 @@ const adjustExistingImages = () => { } }) - // 为现有图片添加拖拽功能 + // 为现有图片添加拖拽功能和删除按钮功能 imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return @@ -1464,15 +1463,24 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - 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'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -1529,15 +1537,24 @@ defineExpose({ }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - 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'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -1595,15 +1612,24 @@ defineExpose({ }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - 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'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } });