From cd9acf9e90a31a6da421727bc075d30336065304 Mon Sep 17 00:00:00 2001
From: nongyehong <2439646234@qq.com>
Date: Wed, 10 Apr 2024 23:21:53 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20fix(custom):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8n-virtual-list=E7=BB=84=E4=BB=B6=E6=9C=AA?=
 =?UTF-8?q?=E9=98=BB=E6=AD=A2=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rightBox/chatBox/ChatMain.vue |  1 +
 src/hooks/useContextMenu.ts                  | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/rightBox/chatBox/ChatMain.vue b/src/components/rightBox/chatBox/ChatMain.vue
index d3419fc..03be59a 100644
--- a/src/components/rightBox/chatBox/ChatMain.vue
+++ b/src/components/rightBox/chatBox/ChatMain.vue
@@ -40,6 +40,7 @@
                     :color="'#fff'"
                     :size="34"
                     @click="selectKey = item.key"
+                    class="select-none"
                     :src="item.accountId === userId ? item.avatar : activeItem.avatar"
                     :class="item.accountId === userId ? '' : 'mr-10px'"
                     fallback-src="/logo.png"
diff --git a/src/hooks/useContextMenu.ts b/src/hooks/useContextMenu.ts
index 127e925..38f421b 100644
--- a/src/hooks/useContextMenu.ts
+++ b/src/hooks/useContextMenu.ts
@@ -4,6 +4,8 @@ export const useContextMenu = (containerRef: Ref) => {
   const showMenu = ref(false)
   const x = ref(0)
   const y = ref(0)
+  const scrollbar_main = document.querySelector('#image-chat-main') as HTMLElement
+  const scrollbar_sidebar = document.querySelector('#image-chat-sidebar') as HTMLElement
 
   // 禁止滚动的默认行为
   const preventDefault = (e: Event) => e.preventDefault()
@@ -11,6 +13,11 @@ export const useContextMenu = (containerRef: Ref) => {
   const handleContextMenu = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    /*! 解决使用n-virtual-list时，右键菜单出现还可以滚动的问题 */
+    if (scrollbar_main || scrollbar_sidebar) {
+      scrollbar_main.style.pointerEvents = 'none'
+      scrollbar_sidebar.style.pointerEvents = 'none'
+    }
     showMenu.value = true
     x.value = e.clientX
     y.value = e.clientY
@@ -21,6 +28,10 @@ export const useContextMenu = (containerRef: Ref) => {
     /* 需要判断点击如果不是.context-menu类的元素的时候，menu才会关闭 */
     if (!event.target.matches('.context-menu, .context-menu *')) {
       showMenu.value = false
+      if (scrollbar_main || scrollbar_sidebar) {
+        scrollbar_main.style.pointerEvents = ''
+        scrollbar_sidebar.style.pointerEvents = ''
+      }
     }
     window.removeEventListener('wheel', preventDefault) // 移除禁止滚轮滚动
   }