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 11:38:37 +08:00
parent fddb131fcb
commit ec6f945f4e
1 changed files with 104 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/RichTextEditor.vue
View File

@@ -96,15 +96,24 @@ onMounted(() => {
}); });
} }
// 为图片容器添加点击事件以显示/隐藏删除按钮 // 为图片容器添加短按事件以显示/隐藏删除按钮
container.addEventListener('click', function(e) { let touchStartTime = 0;
e.stopPropagation(); container.addEventListener('touchstart', function(e) {
// 切换删除按钮的显示状态 touchStartTime = Date.now();
if (deleteBtn) { });
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
deleteBtn.style.display = 'block'; container.addEventListener('touchend', function(e) {
} else { const touchDuration = Date.now() - touchStartTime;
deleteBtn.style.display = 'none'; // 短按（小于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(); handleInput();
}); });
// 为图片容器添加点击事件以显示/隐藏删除按钮 // 为图片容器添加短按事件以显示/隐藏删除按钮
imgContainer.addEventListener('click', function(e) { let touchStartTime = 0;
e.stopPropagation(); imgContainer.addEventListener('touchstart', function(e) {
// 切换删除按钮的显示状态 touchStartTime = Date.now();
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { });
deleteBtn.style.display = 'block';
} else { imgContainer.addEventListener('touchend', function(e) {
deleteBtn.style.display = 'none'; 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 handleTouchStart = (e) => {
// 获取触摸目标 const img = e.target
const target = e.target if (!img.classList.contains('editor-image')) return
// 检查目标是否为图片容器或图片
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
}
// 防止图片被选中 // 防止图片被选中
if (img) { img.style.userSelect = 'none'
img.style.userSelect = 'none' img.style.webkitUserSelect = 'none'
img.style.webkitUserSelect = 'none' img.style.mozUserSelect = 'none'
img.style.mozUserSelect = 'none' img.style.msUserSelect = 'none'
img.style.msUserSelect = 'none'
}
// 清除之前的定时器 // 清除之前的定时器
if (dragState.value.longPressTimer) { if (dragState.value.longPressTimer) {
@@ -944,13 +945,11 @@ const handleTouchStart = (e) => {
dragState.value.currentY = e.touches[0].clientY dragState.value.currentY = e.touches[0].clientY
// 添加拖拽样式 // 添加拖拽样式
if (img) { img.classList.add('dragging')
img.classList.add('dragging') img.style.opacity = '0.9'
img.style.opacity = '0.9' img.style.transform = 'scale(0.98)'
img.style.transform = 'scale(0.98)' img.style.zIndex = '999'
img.style.zIndex = '999' img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
}
// 添加拖拽指示器 // 添加拖拽指示器
const indicator = document.createElement('div') const indicator = document.createElement('div')
@@ -983,10 +982,10 @@ const handleTouchStart = (e) => {
if (navigator.vibrate) { if (navigator.vibrate) {
navigator.vibrate(10) navigator.vibrate(10)
} }
}, 300) // 300毫秒长按触发拖拽
// 阻止页面滚动 // 阻止页面滚动
e.preventDefault() e.preventDefault()
}, 300) // 300毫秒长按触发拖拽
} }
// 处理触摸移动事件 // 处理触摸移动事件
@@ -1439,7 +1438,7 @@ const adjustExistingImages = () => {
} }
}) })
// 为现有图片添加拖拽功能 // 为现有图片添加拖拽功能和删除按钮功能
imageContainers.forEach(container => { imageContainers.forEach(container => {
const img = container.querySelector('img.editor-image') const img = container.querySelector('img.editor-image')
if (!img) return if (!img) return
@@ -1464,15 +1463,24 @@ const adjustExistingImages = () => {
}); });
} }
// 为图片容器添加点击事件以显示/隐藏删除按钮 // 为图片容器添加短按事件以显示/隐藏删除按钮
container.addEventListener('click', function(e) { let touchStartTime = 0;
e.stopPropagation(); container.addEventListener('touchstart', function(e) {
// 切换删除按钮的显示状态 touchStartTime = Date.now();
if (deleteBtn) { });
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
deleteBtn.style.display = 'block'; container.addEventListener('touchend', function(e) {
} else { const touchDuration = Date.now() - touchStartTime;
deleteBtn.style.display = 'none'; // 短按（小于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) { let touchStartTime = 0;
e.stopPropagation(); container.addEventListener('touchstart', function(e) {
// 切换删除按钮的显示状态 touchStartTime = Date.now();
if (deleteBtn) { });
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
deleteBtn.style.display = 'block'; container.addEventListener('touchend', function(e) {
} else { const touchDuration = Date.now() - touchStartTime;
deleteBtn.style.display = 'none'; // 短按（小于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) { let touchStartTime = 0;
e.stopPropagation(); container.addEventListener('touchstart', function(e) {
// 切换删除按钮的显示状态 touchStartTime = Date.now();
if (deleteBtn) { });
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
deleteBtn.style.display = 'block'; container.addEventListener('touchend', function(e) {
} else { const touchDuration = Date.now() - touchStartTime;
deleteBtn.style.display = 'none'; // 短按（小于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';
}
} }
} }
}); });