問題介紹
在實現(xiàn)聊天記錄編輯功能時，用戶希望在點擊一條聊天記錄進行編輯后，再點擊另一條記錄時，前一條記錄的編輯狀態(tài)能夠關(guān)閉，實現(xiàn)互斥效果。然而，實際效果卻是所有點擊的記錄都會同時展示編輯框，無法達到預(yù)期的互斥效果。
具體實現(xiàn)過程
子組件：
<!-- 編輯文本內(nèi)容 --> <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" @input="updatecursorposition" @click="updatecursorposition" @keyup="updatecursorposition" :placeholder="$t('text_send_to')" /> </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))" @click="handleselect(item.id)" /> </el-tooltip> </el-button-group> </div> <!-- ...其他代碼 -->
子組件 script 內(nèi)主要代碼：
const props = defineprops<dcdialogitemprops>() 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) }
父組件使用：
<dcdialogitem v-for="item in messagelist" @menu-click="handlemenuclick" class="pulldown-list-item" :key="item.msg_id" :dialog-data="item" :id="'msg' + item.msg_id" />
messagelist 的數(shù)據(jù)格式：
[ { "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 屬性并沒有互斥地關(guān)閉其他記錄的編輯狀態(tài)。解決這個問題需要在父組件中維護一個全局的編輯狀態(tài)，并在每次點擊編輯時，關(guān)閉其他記錄的編輯狀態(tài)。
可以修改父組件中的 handlemenuclick 方法如下：
const handleMenuClick = (val: string, dialogData: any) => { if(val === '1') { messageList.value.forEach((item) => { item.checked = true item.showEditContent = false // 確保關(guān)閉所有編輯狀態(tài) }) showRecords.value = true showReplyMsg.value = false dialogData.showEditContent = false } else if(val === '2') { messageList.value.forEach((item) => { item.showEditContent = false // 關(guān)閉其他記錄的編輯狀態(tài) }) showReplyMsg.value = false replyAuthor.value = '' showRecords.value = false dialogData.showEditContent = true // 僅打開當前記錄的編輯狀態(tài) } else if(val === '3') { messageList.value.forEach((item) => { item.showEditContent = false // 確保關(guān)閉所有編輯狀態(tài) }) showReplyMsg.value = true dialogData.showEditContent = false replyAuthor.value = dialogData.author.username replyContent.value = dialogData.content } }
通過上述修改，每次點擊編輯時，都會先關(guān)閉所有其他記錄的編輯狀態(tài)，再打開當前記錄的編輯狀態(tài)，從而實現(xiàn)互斥的效果。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
