如何实现聊天记录编辑功能的互斥效果？

问题介绍

在实现聊天记录编辑功能时，用户希望在点击一条聊天记录进行编辑后，再点击另一条记录时，前一条记录的编辑状态能够关闭，实现互斥效果。然而，实际效果却是所有点击的记录都会同时展示编辑框，无法达到预期的互斥效果。

具体实现过程

子组件：

    

        

            
        
    
    

        esc键取消 · 回车键保存
    


    
    
        

            
                
                    
                
            
        
        

子组件 script 内主要代码：

const props = defineprops()
const emit = defineemits<{
    (event: 'menuclick', value: string, item: object): void
}>()
const menuitems = [
    {
        id: '1',
        icon: 'finished',
        title: $t('text_multiple_choice')
    },
    {
        id: '2',
        icon: 'edit',
        title: $t('btn_edit')
    },
    {
        id: '3',
        icon: 'chatdotsquare',
        title: $t('btn_reply')
    }
]

// 处理菜单项点击事件
const editcontent = ref('')
const changemsgid = ref('')
const currentediting = ref(false) //用来标记表单是否正在提交
const handleselect = (val: string) => {
    if(val === '1') {
        props.dialogdata.checked = true
    } else if (val === '2') {
        console.log('--handleselect---2', props.dialogdata);
        props.dialogdata.isediting = true
        currentediting.value = false
        editcontent.value = props.dialogdata.content
        changemsgid.value = props.dialogdata.msg_id
    }
    emit('menuclick', val, props.dialogdata)
}

父组件使用：

messagelist 的数据格式：

[
    {
        "msg_id": "1276491426334769232",
        "content": "啊撒大声地",
        "checked": false
    },
    {
        "msg_id": "1276493284222701702",
        "content": "asdasdaasdsadasd",
        "checked": false
    },
    ...省略
]

父组件 script 主要方法：

奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载

const handlemenuclick = (val: string, dialogdata: any) => {
    if(val === '1') {
        messagelist.value.foreach((item) => {
            item.checked = true
        })
        showrecords.value = true
        showreplymsg.value = false
        dialogdata.showeditcontent = false
    } else if(val === '2') {
        showreplymsg.value = false
        replyauthor.value = ''
        showrecords.value = false
        dialogdata.showeditcontent = true
    } else if(val === '3') {
        showreplymsg.value = true
        dialogdata.showeditcontent = false
        replyauthor.value = dialogdata.author.username
        replycontent.value = dialogdata.content
    }
}

问题解决方案

问题在于，当用户点击不同的聊天记录时，showeditcontent 属性并没有互斥地关闭其他记录的编辑状态。解决这个问题需要在父组件中维护一个全局的编辑状态，并在每次点击编辑时，关闭其他记录的编辑状态。

可以修改父组件中的 handlemenuclick 方法如下：

const handleMenuClick = (val: string, dialogData: any) => {
    if(val === '1') {
        messageList.value.forEach((item) => {
            item.checked = true
            item.showEditContent = false // 确保关闭所有编辑状态
        })
        showRecords.value = true
        showReplyMsg.value = false
        dialogData.showEditContent = false
    } else if(val === '2') {
        messageList.value.forEach((item) => {
            item.showEditContent = false // 关闭其他记录的编辑状态
        })
        showReplyMsg.value = false
        replyAuthor.value = ''
        showRecords.value = false
        dialogData.showEditContent = true // 仅打开当前记录的编辑状态
    } else if(val === '3') {
        messageList.value.forEach((item) => {
            item.showEditContent = false // 确保关闭所有编辑状态
        })
        showReplyMsg.value = true
        dialogData.showEditContent = false
        replyAuthor.value = dialogData.author.username
        replyContent.value = dialogData.content
    }
}

通过上述修改，每次点击编辑时，都会先关闭所有其他记录的编辑状态，再打开当前记录的编辑状态，从而实现互斥的效果。