채팅 레코드 편집 기능의 상호 배제 효과를 달성하는 방법은 무엇입니까?

문제 소개

채팅 레코드 편집 기능을 구현할 때 사용자는 채팅 레코드를 클릭하여 편집 한 다음 다른 레코드를 클릭 할 때 이전 레코드의 편집 상태를 끄려면 상호 배타적 인 효과를 얻을 수 있기를 희망합니다. 그러나 실제 효과는 모든 클릭 레코드가 편집 상자를 동시에 표시하고 예상되는 상호 배타적 효과를 달성 할 수 없다는 것입니다.

특정 구현 프로세스

하위 구성 요소 :

 
<div class="Chat-container" v-if="propss.dialogdata.showeditContent && ChangesGid">
    <div class="Chat-input-box">
        <div class="상단 박스" v-loading="ContmentLoading">
            <el-input ref="textInput" id="채팅 입력" v-model="editContent" type="textArea" t></el-input>
        </div>
    </div>
    <div class="Input-Tips">
        ESC Key <span class="pub-color"> 취소 </span> · key <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">
        <div v-if="! props.dialogdata.Checked" class="more">
            <el-button-group>
                <el-tooltip v-for="menuitems의 항목" : key="item.id" effect="dark" content="item.title" placement="top">
                    <el-button : icon="item.icon" size="small" disabled></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
        <p> 아동 구성 요소 스크립트의 기본 코드 :</p>
<pre class="brush:php;toolbar:false"> const props = defineprops <dcdialogitemprops> ()
const emit = defineemits  ()
const menuitems = [
    {
        ID : '1',
        아이콘 : '완료',
        제목 : $ t ( 'text_multiple_choice')
    },
    {
        ID : '2',
        아이콘 : '편집',
        제목 : $ t ( 'btn_edit')
    },
    {
        ID : '3',
        아이콘 : 'chatdotsquare',
        제목 : $ t ( 'btn_reply')
    }
]]

// 메뉴 핸들 메뉴 항목 클릭 이벤트 const editContent = ref ( '')
const changesgid = 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
        changesgid.value = props.dialogdata.msg_id
    }
    Emit ( 'menuclick', val, props.dialogdata)
}</dcdialogitemprops>

부모 구성 요소 사용 :

 <dcdialogitem v-for="Messagelist의 항목" : key="item.msg_id" dialog-data="항목" id=" 'msg'item.msg_id"></dcdialogitem>

Messagelist의 데이터 형식 :

 [의 뜻
    {
        "msg_id": "1276491426334769232",
        "콘텐츠": "오, 큰 소리로",
        "확인": 거짓
    },
    {
        "msg_id": "127649328422701702",
        "콘텐츠": "Asdasdaasdsadasd",
        "확인": 거짓
    },
    ... 생략]

부모 구성 요소 스크립트 기본 방법 :

 const handlemenuclick = (val : string, dialogdata : any) => {
    if (val === '1') {
        Messagelist.value.foreach ((항목) => {
            item.checked = true
        })
        showrecords.value = true
        showreplymsg.value = false
        dialogdata.showeditContent = false
    } else if (val === '2') {
        showreplymsg.value = false
        Replauthor.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
    }
}

문제 해결책

문제는 사용자가 다른 채팅 레코드를 클릭하면 ShowitContent 속성이 다른 레코드의 편집 상태를 상호 독점적으로 닫지 않는다는 것입니다. 이 문제를 해결하려면 부모 구성 요소에서 전역 편집 상태를 유지하고 편집을 클릭 할 때마다 다른 레코드의 편집 상태를 닫아야합니다.

상위 구성 요소의 핸드 렌 뉴 클릭 방법은 다음과 같이 수정 될 수 있습니다.

 const handlemenuclick = (val : string, dialogdata : any) => {
    if (val === '1') {
        Messagelist.value.foreach ((항목) => {
            item.checked = true
            item.showeditContent = false // 모든 편집 상태가 닫혀 있는지 확인})
        showrecords.value = true
        showreplymsg.value = false
        dialogdata.showeditContent = false
    } else if (val === '2') {
        Messagelist.value.foreach ((항목) => {
            item.showeditContent = false // 다른 레코드의 편집 상태를 닫습니다})
        showreplymsg.value = false
        Replauthor.value = ''
        showrecords.value = false
        dialogdata.showeditContent = true // 현재 레코드의 편집 상태 만 켜져 있습니다} else if (val === '3') {
        Messagelist.value.foreach ((항목) => {
            item.showeditContent = false // 모든 편집 상태가 닫혀 있는지 확인})
        showreplymsg.value = true
        dialogdata.showeditContent = false
        ReplyAuthor.Value = DialogData.author.username
        ReplyContent.Value = DialogData.Content
    }
}

위의 수정을 통해 편집을 클릭 할 때마다 다른 모든 레코드의 편집 상태가 먼저 닫히면 현재 레코드의 편집 상태가 켜져있어 상호 배타적 인 효과가 달성됩니다.

위 내용은 채팅 레코드 편집 기능의 상호 배제 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!