How to achieve the mutual exclusion effect of chat record editing function?

Problem introduction

When implementing the chat record editing function, the user hopes that when clicking on a chat record to edit and then clicking on another record, the editing status of the previous record can be turned off to achieve a mutually exclusive effect. However, the actual effect is that all clicked records will display the edit box at the same time, and the expected mutually exclusive effect cannot be achieved.

Specific implementation process

Subcomponents:

 <!-- Edit text content-->
<div class="chat-container" v-if="props.dialogdata.showeditcontent && changesgid">
    <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 key<span class="pub-color">Cancel</span> · Enter key<span class="pub-color">Save</span>
    </div>
</div>
<div v-else :class="['dc-chat-content', props.dialogdata.author.bot ? 'dc-chat-bot-content' : '']">
    <!-- Toolbar Rendering-->
    <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>
        <!-- ...Other codes--><p> Main code in child component 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')
    }
]

// Handle menu item click event const editcontent = ref('')
const changesgid = ref('')
const currentediting = ref(false) // Used to mark whether the form is submitting 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
        changesgid.value = props.dialogdata.msg_id
    }
    emit('menuclick', val, props.dialogdata)
}</dcdialogitemprops>

Parent component uses:

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

The data format of messagelist:

 [
    {
        "msg_id": "1276491426334769232",
        "content": "Oh, loudly",
        "checked": false
    },
    {
        "msg_id": "1276493284222701702",
        "content": "asdasdaasdsadasd",
        "checked": false
    },
    ...Omitted]

Parent component script main method:

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

Problem Solution

The problem is that when the user clicks on a different chat record, the showeditcontent property does not mutually exclusively close the editing status of other records. To resolve this problem, you need to maintain a global editing state in the parent component and close the editing state of other records every time you click Edit.

The handlemenuclick method in the parent component can be modified as follows:

 const handleMenuClick = (val: string, dialogData: any) => {
    if(val === '1') {
        messageList.value.forEach((item) => {
            item.checked = true
            item.showEditContent = false // Make sure all editing status is closed})
        showRecords.value = true
        showReplyMsg.value = false
        dialogData.showEditContent = false
    } else if(val === '2') {
        messageList.value.forEach((item) => {
            item.showEditContent = false // Close the edit status of other records})
        showReplyMsg.value = false
        replyAuthor.value = ''
        showRecords.value = false
        dialogData.showEditContent = true // Only the edit status of the current record is turned on} else if(val === '3') {
        messageList.value.forEach((item) => {
            item.showEditContent = false // Make sure all editing status is closed})
        showReplyMsg.value = true
        dialogData.showEditContent = false
        replyAuthor.value = dialogData.author.username
        replyContent.value = dialogData.content
    }
}

Through the above modification, each time you click Edit, the editing status of all other records will be closed first, and then the editing status of the current record will be turned on, thereby achieving a mutually exclusive effect.

The above is the detailed content of How to achieve the mutual exclusion effect of chat record editing function?. For more information, please follow other related articles on the PHP Chinese website!