修改右击弹框定位问题
This commit is contained in:
@ -507,10 +507,15 @@ const showImage = (row: any) => {
|
|||||||
const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
contextMenu.currentRow = row
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
|
contextMenu.x = event.clientX - rect.left
|
||||||
|
contextMenu.y = event.clientY - rect.top
|
||||||
|
} else {
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
|
}
|
||||||
|
contextMenu.currentRow = row
|
||||||
|
|
||||||
if (row.parentId) {
|
if (row.parentId) {
|
||||||
// 二级分类菜单
|
// 二级分类菜单
|
||||||
@ -531,6 +536,14 @@ const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
|||||||
clickTreeNode = row
|
clickTreeNode = row
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
|
}
|
||||||
|
let func = () => {
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
setTimeout(() => {
|
||||||
|
contextMenu.visible = false
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
const toggleExpand = (row: any) => {
|
const toggleExpand = (row: any) => {
|
||||||
if (row.childNodes.length != 0) {
|
if (row.childNodes.length != 0) {
|
||||||
@ -566,12 +579,20 @@ const getModelListByType = (id) => {
|
|||||||
}
|
}
|
||||||
const divContextMenu = (event: MouseEvent) => {
|
const divContextMenu = (event: MouseEvent) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
|
contextMenu.x = event.clientX - rect.left
|
||||||
|
contextMenu.y = event.clientY - rect.top
|
||||||
|
} else {
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
|
}
|
||||||
clickTreeNode = null
|
clickTreeNode = null
|
||||||
contextMenu.items = [{ command: 'addType', label: '添加军标类型', icon: 'add' }]
|
contextMenu.items = [{ command: 'addType', label: '添加军标类型', icon: 'add' }]
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMenuCommand = (command: string) => {
|
const handleMenuCommand = (command: string) => {
|
||||||
|
|||||||
@ -583,36 +583,16 @@ const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
|||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
contextMenu.currentRow = row
|
contextMenu.currentRow = row
|
||||||
console.log(event, 'eventevent')
|
// 计算相对于文档的坐标
|
||||||
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
|
contextMenu.x = event.clientX - rect.left
|
||||||
|
contextMenu.y = event.clientY - rect.top
|
||||||
|
} else {
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
|
}
|
||||||
|
|
||||||
// 计算相对于文档的坐标
|
|
||||||
// if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
|
||||||
// document.getElementsByClassName('modelTreeRowCon')[0].style.position = 'relative'
|
|
||||||
// document.getElementsByClassName('context-menu')[0].style.position = 'absolute'
|
|
||||||
// contextMenu.x = event.offsetX + 28
|
|
||||||
// contextMenu.y =
|
|
||||||
// event.offsetX < 0 || event.offsetX == 0 ? event.offsetY + 145 : event.offsetY + 110
|
|
||||||
// // let rect = document.getElementsByClassName('modelTreeRowCon')[0].getBoundingClientRect()
|
|
||||||
// // contextMenu.x = event.clientX - rect.top
|
|
||||||
// // contextMenu.y = event.clientY - rect.left
|
|
||||||
// // console.log('x', event.clientX, rect.left, 'y', event.clientY, rect.top)
|
|
||||||
// } else {
|
|
||||||
// document.getElementsByClassName('modelTreeRowCon')[0].style.position = 'unset'
|
|
||||||
// document.getElementsByClassName('context-menu')[0].style.position = 'fixed'
|
|
||||||
// contextMenu.x = event.clientX
|
|
||||||
// contextMenu.y = event.clientY
|
|
||||||
// }
|
|
||||||
// console.log(contextMenu.x, contextMenu.y, 'kklklkkl')
|
|
||||||
// if (row.parentId) {
|
|
||||||
// // 二级分类菜单
|
|
||||||
// contextMenu.items = [
|
|
||||||
// { command: 'import', label: '导入模型', icon: 'importModel' },
|
|
||||||
// { command: 'rename', label: '重命名', icon: 'rename' },
|
|
||||||
// { command: 'delete', label: '删除', icon: 'delModel' }
|
|
||||||
// ]
|
|
||||||
// } else {
|
|
||||||
// 一级分类菜单
|
// 一级分类菜单
|
||||||
contextMenu.items = [
|
contextMenu.items = [
|
||||||
{ command: 'add-child', label: '添加子类型', icon: 'add' },
|
{ command: 'add-child', label: '添加子类型', icon: 'add' },
|
||||||
@ -624,7 +604,7 @@ const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
|||||||
clickTreeNode = row
|
clickTreeNode = row
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
}
|
}
|
||||||
let func = () => {
|
let func = () => {
|
||||||
@ -669,26 +649,21 @@ const getModelListByType = (id) => {
|
|||||||
}
|
}
|
||||||
const divContextMenu = (event: MouseEvent) => {
|
const divContextMenu = (event: MouseEvent) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
|
contextMenu.x = event.clientX - rect.left
|
||||||
|
contextMenu.y = event.clientY - rect.top
|
||||||
|
} else {
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
|
}
|
||||||
// if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
|
||||||
// document.getElementsByClassName('modelTreeRowCon')[0].style.position = 'relative'
|
|
||||||
// document.getElementsByClassName('context-menu')[0].style.position = 'absolute'
|
|
||||||
// contextMenu.x = event.offsetX + 28
|
|
||||||
// contextMenu.y =
|
|
||||||
// event.offsetX < 0 || event.offsetX == 0 ? event.offsetY + 145 : event.offsetY + 110
|
|
||||||
// } else {
|
|
||||||
// document.getElementsByClassName('modelTreeRowCon')[0].style.position = 'unset'
|
|
||||||
// document.getElementsByClassName('context-menu')[0].style.position = 'fixed'
|
|
||||||
// contextMenu.x = event.clientX
|
|
||||||
// contextMenu.y = event.clientY
|
|
||||||
// }
|
|
||||||
|
|
||||||
clickTreeNode = null
|
clickTreeNode = null
|
||||||
contextMenu.items = [{ command: 'addType', label: '添加模型类型', icon: 'add' }]
|
contextMenu.items = [{ command: 'addType', label: '添加模型类型', icon: 'add' }]
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMenuCommand = (command: string) => {
|
const handleMenuCommand = (command: string) => {
|
||||||
|
|||||||
@ -591,16 +591,11 @@ const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
contextMenu.currentRow = row
|
contextMenu.currentRow = row
|
||||||
// contextMenu.x = event.clientX
|
|
||||||
// contextMenu.y = event.clientY
|
|
||||||
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
document.getElementsByClassName('photoTreeRowCon')[0].style.position = 'relative'
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
document.getElementsByClassName('context-menu')[0].style.position = 'absolute'
|
contextMenu.x = event.clientX - rect.left
|
||||||
contextMenu.x = event.offsetX
|
contextMenu.y = event.clientY - rect.top
|
||||||
contextMenu.y = event.offsetY + 150
|
|
||||||
} else {
|
} else {
|
||||||
document.getElementsByClassName('photoTreeRowCon')[0].style.position = 'unset'
|
|
||||||
document.getElementsByClassName('context-menu')[0].style.position = 'fixed'
|
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
}
|
}
|
||||||
@ -624,6 +619,14 @@ const handleContextMenu = (event: MouseEvent, row: TypeNode) => {
|
|||||||
clickTreeNode = row
|
clickTreeNode = row
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
|
}
|
||||||
|
let func = () => {
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
setTimeout(() => {
|
||||||
|
contextMenu.visible = false
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
const toggleExpand = (row: any) => {
|
const toggleExpand = (row: any) => {
|
||||||
if (row.childNodes.length != 0) {
|
if (row.childNodes.length != 0) {
|
||||||
@ -668,16 +671,11 @@ const divContextMenu = (event: MouseEvent) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
// contextMenu.x = event.clientX
|
|
||||||
// contextMenu.y = event.clientY
|
|
||||||
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
if (document.getElementsByClassName('settingPop')[0]?.style.transform.length) {
|
||||||
document.getElementsByClassName('photoTreeRowCon')[0].style.position = 'relative'
|
let rect = document.getElementsByClassName('settingPop')[0].getBoundingClientRect()
|
||||||
document.getElementsByClassName('context-menu')[0].style.position = 'absolute'
|
contextMenu.x = event.clientX - rect.left
|
||||||
contextMenu.x = event.offsetX
|
contextMenu.y = event.clientY - rect.top
|
||||||
contextMenu.y = event.offsetY + 150
|
|
||||||
} else {
|
} else {
|
||||||
document.getElementsByClassName('photoTreeRowCon')[0].style.position = 'unset'
|
|
||||||
document.getElementsByClassName('context-menu')[0].style.position = 'fixed'
|
|
||||||
contextMenu.x = event.clientX
|
contextMenu.x = event.clientX
|
||||||
contextMenu.y = event.clientY
|
contextMenu.y = event.clientY
|
||||||
}
|
}
|
||||||
@ -685,6 +683,8 @@ const divContextMenu = (event: MouseEvent) => {
|
|||||||
contextMenu.items = [{ command: 'addType', label: '添加图标类型', icon: 'add' }]
|
contextMenu.items = [{ command: 'addType', label: '添加图标类型', icon: 'add' }]
|
||||||
|
|
||||||
contextMenu.visible = true
|
contextMenu.visible = true
|
||||||
|
document.getElementsByClassName('settingPop')[0].removeEventListener('mousedown', func)
|
||||||
|
document.getElementsByClassName('settingPop')[0].addEventListener('mousedown', func)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMenuCommand = (command: string) => {
|
const handleMenuCommand = (command: string) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user