fix: 修复拖拽无法命中里层img元素的问题 (#109)

* fix: 修复自定义属性单词拼写错误 * fix: 修复拖拽无法命中里层img元素的问题 * fix: 修复拖拽无法命中外层元素问题
Evansy · Nov 6, 2023 · 4224ba4 · 4224ba4
1 parent 0db0375
commit 4224ba4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 21 deletions.
diff --git a/src/components/RenderMessage/emoji.vue b/src/components/RenderMessage/emoji.vue
@@ -20,7 +20,13 @@ const handleError = () => {
       加载失败
     </div>
     <template v-else>
-      <img v-if="body?.url" :src="body?.url" @error="handleError" :alt="body.url" />
+      <img
+        v-if="body?.url"
+        :src="body?.url"
+        @error="handleError"
+        :alt="body.url"
+        draggable="false"
+      />
     </template>
   </div>
 </template>
diff --git a/src/components/RenderMessage/image.vue b/src/components/RenderMessage/image.vue
@@ -46,6 +46,7 @@ const handleError = () => {
       <img
         v-if="body?.url"
         :src="body?.url"
+        draggable="false"
         @click="imageStore.show(body?.url as string)"
         @error="handleError"
         :alt="body?.url"

diff --git a/src/views/Home/Chat/components/ChatBox/MsgInput/index.vue b/src/views/Home/Chat/components/ChatBox/MsgInput/index.vue
@@ -569,6 +569,7 @@ const getKey = (item: CacheUserItem) => item.uid
       @focus="onInputFocus"
       @mouseup="checkIsShowSelectDialog"
       @paste="onPaste"
+      :data-room-id="globalStore.currentSession?.roomId"
     />
 
     <!-- 人员选择浮层 -->

diff --git a/src/views/Home/Chat/components/ChatBox/SendBar/index.vue b/src/views/Home/Chat/components/ChatBox/SendBar/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" name="SendBar">
-import { ref, computed, reactive, provide, onMounted, onBeforeUnmount } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, reactive, ref } from 'vue'
 import type { ElInput } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useWsLoginStore } from '@/stores/ws'
 import { useUserStore } from '@/stores/user'
 import { useChatStore } from '@/stores/chat'
@@ -13,19 +14,17 @@ import apis from '@/services/apis'
 import { judgeClient } from '@/utils/detectDevice'
 import { emojis } from '../constant'
 import { useEmojiStore } from '@/stores/emoji'
-import { RoleEnum } from '@/enums'
+import { MsgEnum, RoleEnum } from '@/enums'
 
 import type { IMention } from '../MsgInput/types'
 import { useFileDialog } from '@vueuse/core'
 import { useUpload } from '@/hooks/useUpload'
 import { useEmojiUpload } from '@/hooks/useEmojiUpload'
 import { useRecording } from '@/hooks/useRecording'
-import { MsgEnum } from '@/enums'
 import { useMockMessage } from '@/hooks/useMockMessage'
 import { generateBody } from '@/utils'
 import renderReplyContent from '@/utils/renderReplyContent'
 import eventBus from '@/utils/eventBus'
-import { ElMessage } from 'element-plus'
 import throttle from 'lodash/throttle'
 
 const client = judgeClient()

diff --git a/src/views/Home/Chat/components/SideBar/index.vue b/src/views/Home/Chat/components/SideBar/index.vue
@@ -58,20 +58,22 @@ const load = () => {
       v-for="(item, index) in sessionList"
       :key="index"
       :data-room-id="item.roomId"
-      :class="['chat-message-item ', { active: currentSession.roomId === item.roomId }]"
+      :class="['chat-message-item', { active: currentSession.roomId === item.roomId }]"
       @click="onSelectSelectSession(item.roomId, item.type)"
     >
-      <el-badge :value="item.unreadCount" :max="999" :hidden="item.unreadCount < 1" class="item">
-        <el-avatar shape="circle" :size="38" :src="item.avatar" />
-      </el-badge>
-      <div class="message-info">
-        <div style="white-space: nowrap">
-          <span class="person">{{ item.name }}</span>
-          <span v-if="item.tag" class="tag">{{ item.tag }}</span>
+      <div class="item-wrapper">
+        <el-badge :value="item.unreadCount" :max="999" :hidden="item.unreadCount < 1" class="item">
+          <el-avatar shape="circle" :size="38" :src="item.avatar" />
+        </el-badge>
+        <div class="message-info">
+          <div style="white-space: nowrap">
+            <span class="person">{{ item.name }}</span>
+            <span v-if="item.tag" class="tag">{{ item.tag }}</span>
+          </div>
+          <div class="message-message">{{ item.lastMsg }}</div>
         </div>
-        <div class="message-message">{{ item.lastMsg }}</div>
+        <span class="message-time">{{ item.lastMsgTime }}</span>
       </div>
-      <span class="message-time">{{ item.lastMsgTime }}</span>
     </li>
   </ul>
 </template>

diff --git a/src/views/Home/Chat/components/SideBar/styles.scss b/src/views/Home/Chat/components/SideBar/styles.scss
@@ -5,10 +5,6 @@
   overflow-y: auto;
 
   &-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     width: 280px;
     height: 60px;
     padding: 12px 10px;
@@ -17,6 +13,15 @@
     background-color: var(--background-secondary);
     border-radius: 8px;
 
+    .item-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100%;
+      pointer-events: none;
+    }
+
     .el-avatar {
       flex: none;
     }

diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
@@ -64,7 +64,6 @@ const containerDragListener: TContainerDListener = {
   },
   drop(e) {
     const target = e.target as HTMLDivElement
-    console.log(target.dataset.roomId, this.messageId)
     if (target.dataset.roomId && this.messageId) {
       // 获取消息体
       const message = chatStore.getMessage(Number(this.messageId))
@@ -85,7 +84,6 @@ const containerDragListener: TContainerDListener = {
             .send()
             .then((res) => {
               chatStore.pushMsg(res)
-              //
               // // 发完消息就要刷新会话列表，
               // //  FIXME 如果当前会话已经置顶了，可以不用刷新
               chatStore.updateSessionLastActiveTime(Number(target.dataset.roomId))