api 弹出快捷菜单

通过API触发快捷菜单弹出，需传递坐标参数与菜单配置，支持动态渲染选项及事件

API 弹出快捷菜单设计与实现

弹出式快捷菜单（Context Menu）是一种常见的UI组件，通常通过右键点击、长按或特定手势触发，提供与当前上下文相关的操作选项，本文将详细介绍如何设计API接口以实现可复用的快捷菜单组件。

核心设计要点

设计维度	说明
触发机制	支持右键点击、长按、快捷键（如`Alt+Mouse`）等多种触发方式
菜单项定义	动态配置菜单项，支持图标、子菜单、分隔符等
位置计算	自动对齐触发元素，支持自定义偏移量和防溢出处理
事件响应	支持选中回调、取消回调、菜单项禁用状态等
样式定制	提供主题化接口，支持自定义颜色、字体、动画效果

标准API参数说明

参数名	类型	默认值	说明
`triggerRef`	`HTMLElement`	必填	触发菜单的DOM节点
`items`	`Array`	`[]`	菜单项配置数组
`position`	`Object`	`{ top: 0, left: 0 }`	自定义偏移量（相对于触发元素）
`onSelect`	`Function`	无	选中菜单项的回调函数
`theme`	`String`	`'default'`	主题风格（如`light/dark`）
`disableWall`	`Boolean`	`true`	是否禁止点击菜单外区域关闭菜单
`animation`	`Boolean`	`true`	是否启用动画效果

菜单项结构示例

[
  { label: '复制', icon: 'copy', callback: handleCopy },
  { type: 'separator' }, // 分隔符
  { 
    label: '高级操作', 
    children: [
      { label: '选项1', callback: handleOption1 },
      { label: '选项2', callback: handleOption2 }
    ]
  }
]

实现步骤

初始化组件

const menu = new ContextMenu({
  triggerRef: document.getElementById('trigger-node'),
  items: [/* 菜单配置 */],
  onSelect: (item) => { console.log(item.label) }
});

触发逻辑

// 监听右键事件
triggerRef.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  menu.show({ top: e.clientY, left: e.clientX });
});

位置校准

// 自动调整防止溢出屏幕
const adjustedPosition = calculatePosition(triggerRect, windowSize);
menu.updatePosition(adjustedPosition);

事件绑定

api 弹出快捷菜单

// 菜单项点击处理
menu.on('select', (item) => {
  if (item.callback) item.callback();
});

完整示例代码（React）

import React, { useRef, useState } from 'react';
import ContextMenu from './ContextMenu'; // 假设已封装好的组件
function App() {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const menuItems = [
    { label: '编辑', callback: () => alert('编辑') },
    { label: '删除', callback: () => alert('删除') },
    { type: 'separator' },
    { label: '查看详情', callback: () => alert('详情') }
  ];
  const handleContextMenu = (e) => {
    e.preventDefault();
    setPosition({ top: e.clientY, left: e.clientX });
    setVisible(true);
  };
  return (
    <div>
      <div 
        ref={ref} 
        onContextMenu={handleContextMenu}
        style={{ width: '200px', height: '100px', background: '#eee' }}
      >
        右键点击我
      </div>
      {visible && (
        <ContextMenu 
          items={menuItems} 
          position={position} 
          onClose={() => setVisible(false)}
        />
      )}
    </div>
  );
}