feat: 鼠标移动监听

src/views/customerService/chatDetail.vue

@@ -25,6 +25,8 @@
             :key="item.conversationID"
             :class="{'conversation-item-active': currentConversationItem.conversationID === item.conversationID}"
             class="conversation-item flex f-ai-c"
+            @mouseover="handlerMouseOver(item)"
+            @mouseleave="handlerMouseMove(item)"
             @click="handleSelectChat(item)">
             <div class="conversation-item-image">
               <img :src="item.avatar" class="conversation-item-image__avatar">
@@ -39,9 +41,9 @@
                 <div class="conversation-item-info__message__time">{{ item.lastTime }}</div>
               </div>
             </div>
-            <!--            <div class="conversation-item-delete">
+            <div v-if="deleteConversationID === item.conversationID" class="conversation-item-delete" @click.stop="handleDeleteConversation(item)">
               <i class="el-icon-close"/>
-            </div>-->
+            </div>
           </div>
         </div>
       </el-aside>
@@ -118,7 +120,8 @@ export default {
         user: {
           remark: ''
         }
-      }
+      },
+      deleteConversationID: ''
     }
   },
   computed: {
@@ -483,6 +486,39 @@ export default {
         this.conversationList = newList
       }
     },
+    /**
+     *
+     * */
+    handlerMouseOver(item) {
+      this.deleteConversationID = item.conversationID
+      item.isShowDelelte = true
+      console.log('=====移入', item.nick, item.isShowDelelte)
+    },
+    /**
+     *
+     * */
+    handlerMouseMove(item) {
+      this.deleteConversationID = ''
+      console.log('=====移出', item.nick)
+      item.isShowDelelte = false
+    },
+    handleDeleteConversation(item) {
+      const promise = chat.deleteConversation(item.conversationID)
+      promise.then(function(imResponse) {
+        // 删除会话成功
+        this.$message.success('删除聊天成功')
+        if (this.currentConversationItem.conversationID === item.conversationID) {
+          this.currentConversationItem = {}
+          this.chatUserInfo = {}
+        }
+        this.conversationList = this.conversationList.filter((itemInfo) => {
+          return itemInfo.conversationID !== item.conversationID
+        })
+      }).catch(function(imError) {
+        this.$message.error('删除失败，请重试')
+        console.warn('deleteConversation error:', imError) // 删除会话失败的相关信息
+      })
+    },
     /**
      * 选择聊天
      * */
@@ -775,14 +811,10 @@ export default {
         }
       }
       .conversation-item-delete {
-        display: block;
-        width: 0px;
+        width: 30px;
         height: 30px;
         text-align: end;
       }
-      .conversation-item-delete:hover {
-        width: 30px;
-      }
     }
 
     .conversation-item-active {