64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
/**
|
|
* 表格右键菜单的组合式函数
|
|
* 提供右键菜单功能和鼠标悬浮提示
|
|
*/
|
|
|
|
import { ref, reactive } from 'vue'
|
|
|
|
export function useTableContextMenu() {
|
|
// 鼠标悬浮提示相关
|
|
const showContextMenuHint = ref(false)
|
|
const hintPosition = reactive({ x: 0, y: 0 })
|
|
let hintTimer: any = null
|
|
|
|
/**
|
|
* 为表格行添加类名
|
|
*/
|
|
const getRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
|
|
return 'table-row-with-context-menu'
|
|
}
|
|
|
|
/**
|
|
* 单元格鼠标进入事件处理
|
|
*/
|
|
const handleCellMouseEnter = (
|
|
row: any,
|
|
column: any,
|
|
cell: HTMLElement,
|
|
event: MouseEvent
|
|
) => {
|
|
// 清除之前的定时器
|
|
if (hintTimer) {
|
|
clearTimeout(hintTimer)
|
|
}
|
|
|
|
// 延迟显示提示，避免快速划过时闪烁
|
|
hintTimer = setTimeout(() => {
|
|
hintPosition.x = event.clientX + 15
|
|
hintPosition.y = event.clientY + 10
|
|
showContextMenuHint.value = true
|
|
}, 300)
|
|
}
|
|
|
|
/**
|
|
* 单元格鼠标离开事件处理
|
|
*/
|
|
const handleCellMouseLeave = () => {
|
|
if (hintTimer) {
|
|
clearTimeout(hintTimer)
|
|
}
|
|
showContextMenuHint.value = false
|
|
}
|
|
|
|
return {
|
|
// 状态
|
|
showContextMenuHint,
|
|
hintPosition,
|
|
|
|
// 方法
|
|
getRowClassName,
|
|
handleCellMouseEnter,
|
|
handleCellMouseLeave
|
|
}
|
|
}
|