问题介绍
在实现聊天记录编辑功能时，用户希望在点击一条聊天记录进行编辑后，再点击另一条记录时，前一条记录的编辑状态能够关闭，实现互斥效果。然而，实际效果却是所有点击的记录都会同时展示编辑框，无法达到预期的互斥效果。
具体实现过程
子组件：
esc键取消 · 回车键保存子组件 script 内主要代码：
const props = defineprops()const emit = defineemits()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 主要方法：
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 }}通过上述修改，每次点击编辑时，都会先关闭所有其他记录的编辑状态，再打开当前记录的编辑状态，从而实现互斥的效果。
以上就是如何实现聊天记录编辑功能的互斥效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1504212.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
