如何實現聊天記錄編輯功能的互斥效果？

問題介紹

在實現聊天記錄編輯功能時，用戶希望在點擊一條聊天記錄進行編輯後，再點擊另一條記錄時，前一條記錄的編輯狀態能夠關閉，實現互斥效果。然而，實際效果卻是所有點擊的記錄都會同時展示編輯框，無法達到預期的互斥效果。

具體實現過程

子組件：

 <!-- 編輯文本內容-->
<div class="chat-container" v-if="props.dialogdata.showeditcontent && changemsgid">
    <div class="chat-input-box">
        <div class="top-boxes" v-loading="contentloading">
            <el-input ref="textinput" id="chat-input" autosize v-model="editcontent" type="textarea" :placeholder="$t('text_send_to')"></el-input>
        </div>
    </div>
    <div class="input-tips">
        esc鍵<span class="pub-color">取消</span> · 回車鍵<span class="pub-color">保存</span>
    </div>
</div>
<div v-else :class="['dc-chat-content', props.dialogdata.author.bot ? 'dc-chat-bot-content' : '']">
    <!-- 工具欄渲染-->
    <el-popover placement="right" :visible="toolsvisible" :offset="1" :show-arrow="false" popper-class="custom-popper" :teleported="false">
        <div v-if="!props.dialogdata.checked" class="more">
            <el-button-group>
                <el-tooltip v-for="item in menuitems" :key="item.id" effect="dark" :content="item.title" placement="top">
                    <el-button :icon="item.icon" size="small" :disabled="item.id === '2' && (userinfo.username !== props.dialogdata.author.username || !boolean(props.dialogdata.content))"></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
        <!-- ...其他代碼--><p>子組件script 內主要代碼：</p>
<pre class="brush:php;toolbar:false"> const props = defineprops<dcdialogitemprops>()
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)
}</dcdialogitemprops>

父組件使用：

 <dcdialogitem v-for="item in messagelist" class="pulldown-list-item" :key="item.msg_id" :dialog-data="item" :id="'msg' item.msg_id"></dcdialogitem>

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
    }
}

通過上述修改，每次點擊編輯時，都會先關閉所有其他記錄的編輯狀態，再打開當前記錄的編輯狀態，從而實現互斥的效果。