diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index df72eb8..143c676 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -24,6 +24,9 @@ const props = defineProps({ const emit = defineEmits(['update:modelValue']) +// 全局常量定义 +const DELETE_BUTTON_DELAY = 1000 // 删除按钮延时时间(毫秒),用于防止误触 + const editorRef = ref(null) const content = ref(props.modelValue || '') const isToolbarVisible = ref(false) @@ -111,19 +114,17 @@ onMounted(() => { if (deleteBtn) { // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + container.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -925,19 +926,17 @@ const insertImage = () => { // 为删除按钮添加点击事件(鼠标和触摸) // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 // 为图片容器添加短按事件以显示/隐藏删除按钮 let touchStartTime = 0 @@ -1620,19 +1619,17 @@ const wrapOrphanedImages = () => { console.log('Found existing delete button, adding event listeners') // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器,避免重复 @@ -1747,19 +1744,17 @@ const wrapOrphanedImages = () => { // 为删除按钮添加点击事件 // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 // 为图片容器添加短按事件以显示/隐藏删除按钮 let touchStartTime = 0 @@ -1896,19 +1891,17 @@ const adjustExistingImages = () => { if (deleteBtn) { // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -2061,19 +2054,17 @@ defineExpose({ if (deleteBtn) { // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -2195,19 +2186,17 @@ defineExpose({ if (deleteBtn) { // 先移除可能已有的事件监听器,避免重复 deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查,确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时,确保删除按钮状态已正确设置 } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -2514,13 +2503,13 @@ defineExpose({ :deep(.editor-content .image-delete-btn) { position: absolute; - top: 8px; - right: 8px; - width: 24px; - height: 24px; + top: 4px; + right: 4px; + width: 40px; + height: 40px; cursor: pointer; z-index: 1000; - transition: opacity 0.2s ease; + transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease; /* 使用背景图片而不是背景色和边框,确保图标正确显示 */ background-image: url('/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png'); background-size: contain; @@ -2529,11 +2518,13 @@ defineExpose({ background-color: transparent; /* 确保背景透明 */ pointer-events: none; opacity: 0; + display: none; } :deep(.editor-content .image-delete-btn.visible) { pointer-events: all; opacity: 1; + display: block; } :deep(.editor-content .editor-image.draggable) {