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) {
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)
}
}, 300) // 300毫秒长按触发拖拽
// 阻止页面滚动
e.preventDefault()
// 阻止页面滚动
e.preventDefault()
}, 300) // 300毫秒长按触发拖拽
}
// 处理触摸移动事件
@@ -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';
}
}
}
});