product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

\"feat: 优化移动端图片删除按钮交互，使用触摸事件替代鼠标事件\"

Browse Source
This commit is contained in:
yuantao
2025-10-16 10:41:00 +08:00
parent ae035b5786
commit 52a706843c
1 changed files with 103 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/RichTextEditor.vue
View File

@@ -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) {