@oixg/context-menu

右键菜单 composable，UI 完全由你控制。零外部依赖，仅约 1KB。

安装

npm install @oixg/context-menu

用法

<script setup lang="ts">
import { useContextMenu } from '@oixg/context-menu'

const { open, triggerEvents, style, close, menuRef } = useContextMenu()
</script>

<template>
  <div v-on="triggerEvents">右键点击</div>
  <div v-if="open" :style="style" :ref="menuRef" class="menu">
    <div @click="close">选项一</div>
    <div @click="close">选项二</div>
  </div>
</template>

行为

• 右键点击触发元素时，菜单出现在鼠标位置
• 自动边界修正：菜单不超出视口范围（右下角右键时自动左移/上移）
• 点击菜单外部任意位置（左键），菜单自动关闭

API

useContextMenu(id?: string)

参数

| 参数 | 类型 | 说明 | |------|------|------| | id | string （可选） | 实例标识。不传每次调用创建独立实例；传相同 id 返回同一个实例（完全共享） |

返回值

| 返回值 | 类型 | 说明 | |--------|------|------| | open | Ref<boolean> | 菜单开关状态 | | triggerEvents | { contextmenu: (event) => void } | 绑定到触发元素的事件 | | style | { position: 'fixed'; left: string; top: string } | 绑定到菜单容器的样式，控制菜单位置 | | close | () => void | 手动关闭菜单 | | menuRef | (el: any) => void | callback ref，绑定到菜单容器用于边界位置修正 |

triggerEvents 使用 v-on 绑定：<div v-on="triggerEvents">

style 使用 :style 绑定：<div :style="style">（推荐解构使用，不解构需在模板中加 .value）

menuRef 使用 :ref 绑定：<div :ref="menuRef">

作用域说明

| 用法 | 行为 | |------|------| | useContextMenu() | 每次调用返回完全独立的实例 | | useContextMenu('foo') + useContextMenu('foo') | 相同 id 返回同一个实例，所有属性完全共享。适合跨组件通信 |

示例：触发组件和菜单组件跨组件共享同一个实例。

<!-- TriggerComponent.vue -->
<script setup lang="ts">
const { triggerEvents } = useContextMenu('category-menu')
</script>
<template>
  <div v-on="triggerEvents">右键打开菜单</div>
</template>

<!-- MenuComponent.vue -->
<script setup lang="ts">
const { open, style, menuRef, close } = useContextMenu('category-menu')
</script>
<template>
  <div v-if="open.value" :style="style" :ref="menuRef" class="menu">
    <div @click="close">选项</div>
  </div>
</template>

边界修正

menuRef 绑定到菜单容器后，composable 会自动读取菜单尺寸并在超出视口时修正位置。建议始终绑定。