mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
fix: 修改右键判定区域,新增历史记录store
This commit is contained in:
@@ -1,63 +0,0 @@
|
||||
import { reactive, ref, nextTick } from 'vue'
|
||||
import { getChartEditStore } from './useStore.hook'
|
||||
import { loadingError } from '@/utils'
|
||||
|
||||
const chartEditStore = getChartEditStore()
|
||||
|
||||
enum MenuEnum {
|
||||
DELETE = 'delete'
|
||||
}
|
||||
|
||||
export const useContextMenu = () => {
|
||||
const showDropdownRef = ref(false)
|
||||
const targetIndex = ref<number>(0)
|
||||
|
||||
// * 右键选项
|
||||
const menuOptions = reactive([
|
||||
{
|
||||
label: '删除',
|
||||
key: MenuEnum.DELETE
|
||||
}
|
||||
])
|
||||
|
||||
// * 右键处理
|
||||
const handleContextMenu = (e: MouseEvent, index: number) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
targetIndex.value = index
|
||||
let target = e.target
|
||||
while (target instanceof SVGElement) {
|
||||
target = target.parentNode
|
||||
}
|
||||
showDropdownRef.value = false
|
||||
nextTick().then(() => {
|
||||
chartEditStore.setMousePosition(e.clientX, e.clientY)
|
||||
showDropdownRef.value = true
|
||||
})
|
||||
}
|
||||
|
||||
// * 失焦
|
||||
const onClickoutside = (e: MouseEvent) => {
|
||||
showDropdownRef.value = false
|
||||
}
|
||||
|
||||
// * 事件处理
|
||||
const handleMenuSelect = (key: string) => {
|
||||
showDropdownRef.value = false
|
||||
switch (key) {
|
||||
case MenuEnum.DELETE:
|
||||
chartEditStore.removeComponentList(targetIndex.value)
|
||||
break
|
||||
default: loadingError()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
showDropdownRef,
|
||||
menuOptions,
|
||||
handleContextMenu,
|
||||
onClickoutside,
|
||||
handleMenuSelect,
|
||||
mousePosition: chartEditStore.getMousePosition
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@ interface AttrType {
|
||||
|
||||
export const useComponentStyle = (attr: AttrType, index: number) => {
|
||||
const componentStyle = {
|
||||
zIndex: index,
|
||||
zIndex: index + 1,
|
||||
left: `${attr.x}px`,
|
||||
top: `${attr.y}px`,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user