refactor(editor): 优化引用消息的点击事件处理逻辑
使用事件委托统一处理引用消息的点击事件,包括关闭按钮点击和光标定位 移除重复的事件监听器,简化代码结构 修复引用消息ID字段从msg_id改为id的匹配问题
This commit is contained in:
parent
b18a6e5432
commit
1ff26564c7
@ -375,6 +375,7 @@ const sendMessage = () => {
|
||||
quoteId:messageData.quoteId,
|
||||
}
|
||||
console.log('发送前',data)
|
||||
console.log('quoteData',quoteData.value)
|
||||
emit(
|
||||
'editor-event',
|
||||
emitCall('text_event', data,(ok)=>{
|
||||
@ -527,7 +528,7 @@ const parseEditorContent = () => {
|
||||
const result = {
|
||||
items: items.length > 0 ? items : [{ type: 1, content: '' }],
|
||||
mentionUids,
|
||||
quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.msg_id ||'' : ''
|
||||
quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.id ||'' : ''
|
||||
}
|
||||
|
||||
// 如果有引用信息,添加到结果中
|
||||
@ -840,10 +841,15 @@ const onSubscribeQuote = (data) => {
|
||||
editor.appendChild(quoteElement)
|
||||
}
|
||||
|
||||
// 添加关闭按钮点击事件
|
||||
const closeBtn = quoteElement.querySelector('.quote-close')
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
// 使用事件委托处理引用元素的所有点击事件
|
||||
quoteElement.addEventListener('click', (e) => {
|
||||
console.log('执行删除',e)
|
||||
// 检查点击的是否是关闭按钮或其内部元素
|
||||
const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
|
||||
if (closeButton) {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation()
|
||||
|
||||
// 移除引用元素
|
||||
quoteElement.remove()
|
||||
|
||||
@ -859,15 +865,8 @@ const onSubscribeQuote = (data) => {
|
||||
setTimeout(() => {
|
||||
editor.focus()
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
|
||||
// 注意:不调用saveDraft(),确保引用内容不会被保存到草稿中
|
||||
|
||||
// 添加点击整个引用卡片的事件
|
||||
quoteElement.addEventListener('click', (e) => {
|
||||
// 如果不是点击关闭按钮,则设置光标到引用卡片后面
|
||||
if (!e.target.classList.contains('quote-close')) {
|
||||
} else {
|
||||
// 如果不是点击关闭按钮,则设置光标到引用卡片后面
|
||||
const selection = window.getSelection()
|
||||
const range = document.createRange()
|
||||
range.setStartAfter(quoteElement)
|
||||
@ -880,6 +879,13 @@ const onSubscribeQuote = (data) => {
|
||||
}
|
||||
})
|
||||
|
||||
// 注意:不调用saveDraft(),确保引用内容不会被保存到草稿中
|
||||
|
||||
// 在同一个事件监听器中处理引用卡片的点击
|
||||
// 已经在上面的事件处理中添加了关闭按钮的处理逻辑
|
||||
// 这里只需要处理非关闭按钮的点击
|
||||
// 注意:由于事件委托的方式,不需要额外添加点击事件监听器
|
||||
|
||||
// 监听键盘事件,处理删除操作
|
||||
// 监听键盘事件,处理删除操作
|
||||
const handleDeleteQuote = function(e) {
|
||||
@ -1109,6 +1115,11 @@ onMounted(() => {
|
||||
bus.subscribe(EditorConst.Edit, onSubscribeEdit)
|
||||
bus.subscribe(EditorConst.Clear, onSubscribeClear)
|
||||
|
||||
// 为编辑器添加点击事件监听器,用于处理引用消息关闭等
|
||||
if (editorRef.value) {
|
||||
editorRef.value.addEventListener('click', handleEditorClick);
|
||||
}
|
||||
|
||||
// 点击外部隐藏mention
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!editorRef.value?.contains(event.target)) {
|
||||
@ -1134,6 +1145,11 @@ onBeforeUnmount(() => {
|
||||
bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
|
||||
bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
|
||||
|
||||
// 移除编辑器点击事件监听器
|
||||
if (editorRef.value) {
|
||||
editorRef.value.removeEventListener('click', handleEditorClick);
|
||||
}
|
||||
|
||||
// 清理DOM事件监听器
|
||||
const editor = editorRef.value
|
||||
if (editor && handleDeleteQuote) {
|
||||
@ -1191,6 +1207,24 @@ const onVoteSubmit = (data) => {
|
||||
})
|
||||
isShowVote.value = false
|
||||
}
|
||||
|
||||
// 处理编辑器内部点击事件(用于关闭引用等)
|
||||
const handleEditorClick = (event) => {
|
||||
const closeButton = event.target.closest('.quote-close');
|
||||
|
||||
if (closeButton) {
|
||||
const quoteElement = event.target.closest('.editor-quote');
|
||||
if (quoteElement) {
|
||||
quoteElement.remove();
|
||||
quoteData.value = null;
|
||||
|
||||
handleInput({ target: editorRef.value });
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
Loading…
Reference in New Issue
Block a user