test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-11-29 18:28:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix(custom): 修复使用n-virtual-list组件未阻止滚动问题

Browse Source
This commit is contained in:
nongyehong 2024-04-10 23:21:53 +08:00
parent 998ab1418a
commit cd9acf9e90
2 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/rightBox/chatBox/ChatMain.vue
View File

@ -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"

11
src/hooks/useContextMenu.ts
View File

@ -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) // 移除禁止滚轮滚动
}