refactor(editor): 优化引用消息的点击事件处理逻辑

使用事件委托统一处理引用消息的点击事件,包括关闭按钮点击和光标定位
移除重复的事件监听器,简化代码结构
修复引用消息ID字段从msg_id改为id的匹配问题
This commit is contained in:
Phoenix 2025-06-06 13:43:39 +08:00
parent b18a6e5432
commit 1ff26564c7

View File

@ -375,6 +375,7 @@ const sendMessage = () => {
quoteId:messageData.quoteId, quoteId:messageData.quoteId,
} }
console.log('发送前',data) console.log('发送前',data)
console.log('quoteData',quoteData.value)
emit( emit(
'editor-event', 'editor-event',
emitCall('text_event', data,(ok)=>{ emitCall('text_event', data,(ok)=>{
@ -527,7 +528,7 @@ const parseEditorContent = () => {
const result = { const result = {
items: items.length > 0 ? items : [{ type: 1, content: '' }], items: items.length > 0 ? items : [{ type: 1, content: '' }],
mentionUids, 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) editor.appendChild(quoteElement)
} }
// // 使
const closeBtn = quoteElement.querySelector('.quote-close') quoteElement.addEventListener('click', (e) => {
if (closeBtn) { console.log('执行删除',e)
closeBtn.addEventListener('click', () => { //
const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
if (closeButton) {
//
e.stopPropagation()
// //
quoteElement.remove() quoteElement.remove()
@ -859,15 +865,8 @@ const onSubscribeQuote = (data) => {
setTimeout(() => { setTimeout(() => {
editor.focus() editor.focus()
}, 0) }, 0)
}) } else {
} //
// saveDraft()稿
//
quoteElement.addEventListener('click', (e) => {
//
if (!e.target.classList.contains('quote-close')) {
const selection = window.getSelection() const selection = window.getSelection()
const range = document.createRange() const range = document.createRange()
range.setStartAfter(quoteElement) range.setStartAfter(quoteElement)
@ -880,6 +879,13 @@ const onSubscribeQuote = (data) => {
} }
}) })
// saveDraft()稿
//
//
//
//
// //
// //
const handleDeleteQuote = function(e) { const handleDeleteQuote = function(e) {
@ -1108,6 +1114,11 @@ onMounted(() => {
bus.subscribe(EditorConst.Quote, onSubscribeQuote) bus.subscribe(EditorConst.Quote, onSubscribeQuote)
bus.subscribe(EditorConst.Edit, onSubscribeEdit) bus.subscribe(EditorConst.Edit, onSubscribeEdit)
bus.subscribe(EditorConst.Clear, onSubscribeClear) bus.subscribe(EditorConst.Clear, onSubscribeClear)
//
if (editorRef.value) {
editorRef.value.addEventListener('click', handleEditorClick);
}
// mention // mention
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
@ -1133,6 +1144,11 @@ onBeforeUnmount(() => {
bus.unsubscribe(EditorConst.Quote, onSubscribeQuote) bus.unsubscribe(EditorConst.Quote, onSubscribeQuote)
bus.unsubscribe(EditorConst.Edit, onSubscribeEdit) bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
bus.unsubscribe(EditorConst.Clear, onSubscribeClear) bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
//
if (editorRef.value) {
editorRef.value.removeEventListener('click', handleEditorClick);
}
// DOM // DOM
const editor = editorRef.value const editor = editorRef.value
@ -1191,6 +1207,24 @@ const onVoteSubmit = (data) => {
}) })
isShowVote.value = false 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> </script>
<template> <template>