shadcn-vue Context Menu 组件完整指南从安装到源码级解析【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue本文围绕 shadcn-vueVue 版 shadcn-ui中的 Context Menu右键菜单组件展开介绍其基于 reka-ui 的架构设计、CLI 与手动两种安装方式、从基础用法到复选框/单选框/子菜单的完整实战并结合仓库源码剖析每个子组件的样式实现与属性透传原理。阅读完本文你将能够独立在 Vue 3 Tailwind CSS 项目中搭建功能完整、样式可定制的右键上下文菜单。组件概览Context Menu 能做什么Context Menu 是一个由用户右键或长按触发、用于展示一组操作或功能的菜单组件。它是桌面应用交互模式在 Web 端的重要移植用户不需要预先看到所有按钮而是通过右键唤起与当前元素上下文相关的动作集合如复制 / 粘贴 / 删除。在 shadcn-vue 中该组件以 reka-ui 的ContextMenu原语为核心通过一层薄封装提供开箱即用的 Tailwind 样式。完整的组件族位于 apps/v4/registry/new-york-v4/ui/context-menu共 15 个 Vue 组件加一个统一出口组件作用ContextMenu根组件管理打开状态与交互行为ContextMenuTrigger右键触发区域ContextMenuContent菜单弹出内容面板ContextMenuItem普通菜单项支持inset、variantdestructiveContextMenuCheckboxItem带复选框的菜单项ContextMenuRadioGroup/ContextMenuRadioItem单选框分组与单选菜单项ContextMenuSub/ContextMenuSubTrigger/ContextMenuSubContent子菜单二级菜单ContextMenuLabel菜单分组标签ContextMenuSeparator分隔线ContextMenuShortcut快捷键提示文本ContextMenuGroup菜单项逻辑分组ContextMenuPortal将内容传送到 body 的传送门所有组件通过 index.ts 统一导出方便从/components/ui/context-menu一处引入。安装方式一CLI 一键安装推荐在项目根目录执行npx shadcn-vuelatest add context-menuCLI 会自动将上述 15 个组件文件写入你的components/ui/context-menu目录并确保reka-ui等依赖就绪。该命令由仓库中 packages/cli 的 add 命令体系驱动自动处理依赖安装与文件落盘。方式二手动安装安装底层依赖 reka-uinpm install reka-ui从仓库 apps/v4/registry/new-york-v4/ui/context-menu 将组件源码复制到你的项目中如src/components/ui/context-menu更新导入路径以匹配你的项目结构例如将/registry/new-york-v4/ui/context-menu改为/components/ui/context-menu并确认/lib/utils中的cn工具函数可用。基础用法以下是最小可用的右键菜单示例即官方文档 context-menu.md 中的核心用法script setup langts import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, } from /components/ui/context-menu /script template ContextMenu ContextMenuTriggerRight click/ContextMenuTrigger ContextMenuContent ContextMenuItemProfile/ContextMenuItem ContextMenuItemBilling/ContextMenuItem ContextMenuItemTeam/ContextMenuItem ContextMenuSeparator / ContextMenuItemSubscription/ContextMenuItem /ContextMenuContent /ContextMenu /template结构非常清晰ContextMenuTrigger包裹可右键的目标元素ContextMenuContent内部放置菜单项。你可以在ContextMenuContent上通过class属性直接覆盖宽度等样式如classw-52。源码级解析组件如何工作shadcn-vue 的 Context Menu 全部采用reka-ui 原语 样式封装模式每个组件只做两件事——把 props/emits 透传给 reka-ui 对应原语并附加data-slot标识与 Tailwind 样式类。根组件与触发器的状态管理ContextMenu.vue 直接包装ContextMenuRoot使用useForwardPropsEmits将外部传入的 props 与 emits 全部转发const props definePropsContextMenuRootProps() const emits defineEmitsContextMenuRootEmits() const forwarded useForwardPropsEmits(props, emits)这意味着 reka-ui 提供的modal、dir、open、defaultOpen、onOpenChange、delayDuration等能力均可用具体 API 以 reka-ui 文档为准。ContextMenuTrigger.vue 同样通过useForwardProps透传负责捕获右键事件并定位弹出位置。内容面板定位、尺寸与动效ContextMenuContent.vue 是样式最丰富的文件。它先用reactiveOmit(props, class)剔除class避免污染透传再通过ContextMenuPortal将菜单渲染到 body 层级避免父容器overflow裁剪ContextMenuPortal ContextMenuContent >const props withDefaults(definePropsContextMenuItemProps { class?: HTMLAttributes[class] inset?: boolean variant?: default | destructive }(), { variant: default, })inset缩进模式pl-8用于与带图标的菜单项对齐源码通过:data-inset配合data-[inset]:pl-8实现variantdestructive危险操作样式data-[variantdestructive]:text-destructive-foreground及聚焦时的focus:bg-destructive/10暗色模式dark:focus:bg-destructive/40图标处理[_svg:not([class*text-])]:text-muted-foreground统一图标颜色[_svg:not([class*size-])]:size-4统一图标尺寸禁用态继承 reka-ui 的disabled配合data-[disabled]:pointer-events-none>span classpointer-events-none absolute left-2 flex size-3.5 items-center justify-center ContextMenuItemIndicator slot nameindicator-icon Check classsize-4 / /slot /ContextMenuItemIndicator /span使用方式ContextMenuCheckboxItem通过v-modelmodel-value控制勾选ContextMenuRadioGroup通过model-value管理单选值内部放置多个ContextMenuRadioItem。子菜单子菜单由三件套组成ContextMenuSub.vue状态容器、ContextMenuSubTrigger.vue右侧带ChevronRight箭头ml-auto右对齐展开时data-[stateopen]:bg-accent、ContextMenuSubContent.vue二级面板shadow-lg且使用origin-(--reka-context-menu-content-transform-origin)让缩放动画以触发器为原点。从源码可见ContextMenuSubContent的 props 类型复用自DropdownMenuSubContentProps与下拉菜单共享同一套接口。其余小部件ContextMenuSeparator.vuebg-border -mx-1 my-1 h-px的水平分隔线ContextMenuLabel、ContextMenuGroup、ContextMenuPortal、ContextMenuShortcut均为轻量透传封装分别提供分组标题、逻辑分组、传送门与快捷键提示快捷键通常显示为右侧的⌘[等文字。完整实战仿浏览器右键菜单仓库中的官方演示 ContextMenuDemo.vue 集合了上述全部特性几乎等同于浏览器原生右键菜单普通项、禁用项、子菜单、复选框、单选框、快捷键、图标与危险操作一应俱全。核心结构如下script setup langts import { Code2Icon, PlusIcon, TrashIcon } from lucide/vue import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from /registry/new-york-v4/ui/context-menu /script template ContextMenu ContextMenuTrigger classflex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm Right click here /ContextMenuTrigger ContextMenuContent classw-52 !-- 普通项 快捷键 禁用项 -- ContextMenuItem inset Back ContextMenuShortcut⌘[/ContextMenuShortcut /ContextMenuItem ContextMenuItem inset disabled Forward ContextMenuShortcut⌘]/ContextMenuShortcut /ContextMenuItem !-- 子菜单 -- ContextMenuSub ContextMenuSubTrigger inset More Tools /ContextMenuSubTrigger ContextMenuSubContent classw-44 ContextMenuItem insetSave Page... ContextMenuShortcut⇧⌘S/ContextMenuShortcut/ContextMenuItem ContextMenuItemPlusIcon / Create Shortcut.../ContextMenuItem ContextMenuSeparator / ContextMenuItem variantdestructiveTrashIcon / Delete/ContextMenuItem /ContextMenuSubContent /ContextMenuSub !-- 复选框 -- ContextMenuCheckboxItem :model-valuetrue Show Bookmarks ContextMenuShortcut⌘⇧B/ContextMenuShortcut /ContextMenuCheckboxItem ContextMenuCheckboxItemShow Full URLs/ContextMenuCheckboxItem !-- 单选框 -- ContextMenuRadioGroup model-valuepedro ContextMenuLabel insetPeople/ContextMenuLabel ContextMenuRadioItem valuepedroPedro Duarte/ContextMenuRadioItem ContextMenuRadioItem valuecolmColm Tuite/ContextMenuRadioItem /ContextMenuRadioGroup /ContextMenuContent /ContextMenu /template实战要点总结触发区域不限于文本可以是一个带虚线边框的占位卡片如演示中的h-[150px] w-[300px]区域任意元素都能成为右键目标图标通过默认插槽放在文本前组件内置样式会自动统一图标尺寸与颜色disabled项不响应点击并自动半透明复选框默认选中只需传:model-valuetrue单选组通过model-value指定当前值需要二级菜单时把ContextMenuSub当作普通菜单项平级放置即可子菜单内容宽度可通过ContextMenuSubContent的class单独控制如w-44。进阶说明与注意事项导入路径演示代码从/registry/new-york-v4/ui/context-menu引入这是站点自身目录你安装后应使用/components/ui/context-menu或你的实际别名路径手动安装时记得同步修改 index.ts 中各组件的相对导入。Props/Emits 透传所有组件都通过useForwardProps/useForwardPropsEmits把 reka-ui 的能力原样暴露因此 reka-ui ContextMenu 原语支持的高级交互模态行为、方向、受控打开状态等在本组件中同样可用不必改源码。Portal 渲染ContextMenuContent默认经由ContextMenuPortal渲染到 body可避免父级overflow或z-index上下文导致菜单被裁剪或遮挡z-50保证了较高的层叠优先级。无障碍与键盘组件继承 reka-ui 的完整无障碍实现方向键导航、Enter 选择、Esc 关闭、焦点管理无需额外处理。样式定制所有视觉细节均由 Tailwind 类控制直接传入class即可覆盖主题色依赖项目中的popover、accent、destructive等设计令牌请在主题配置中确保这些色板存在。相关资源官方组件文档apps/v4/content/docs/components/context-menu.md组件源码目录apps/v4/registry/new-york-v4/ui/context-menu完整演示组件apps/v4/components/demo/ContextMenuDemo.vue组件清单与文档导航apps/v4/content/docs/02.components.md【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
基于Spring Boot的电影票网上购票系统：从数据库设计到并发选座实战 做毕设选了这个“基于Spring Boot的电影票网上购票系统”，一头扎进去搞了大概三周，从数据库设计到部署上线全程踩了一遍，最后论文、答辩、部署文档都齐了。这篇就把这个项目的完整设计思路、核心代码、部署流程和踩坑实录全部拆开讲ÿ… · 2026/9/24 20:49:52
WMS场景下RAG语义断层与pgvector优化实战 1. 问题本质：不是RAG没用，是WMS场景下“简单流程”四个字触发了语义断层我第一次在客户现场看到这个报错时，也以为是pgvector没装好、embedding模型选错了，或者PostgreSQL的向量扩展没启用。但翻了三天日志，发现所有向… · 2026/9/24 20:49:52
免密登录远程ssh 参考文档：https://zhuanlan.zhihu.com/p/667236864
每次连接都需要输入密码未免有些麻烦，一台机器想要免密访问其他机器，需要把自己的公钥内容发送到别的机器的authorized_keys中去，并在本机config文件中配置私钥文件位置。 生成… · 2026/9/24 20:49:52
光互联技术演进：OIO、OBO、NPO、CPO架构对比与选型指南 光互联这个词，这几年在数据中心和AI集群的圈子里被提得越来越频繁。早些年大家聊交换机，关注点基本都在交换芯片的容量、缓存大小、端口密度这些电层面的指标上，光模块不过是插在面板上的一个可插拔配件，选型时看看速率、传输距离… · 2026/9/24 21:28:01
福建定速微小型齿轮减速电机优质供应商挑选全攻略：豪力实业值得信赖 有没有通过CE认证的微小型齿轮减速电机厂家推荐?
求推荐批量生产的微小型齿轮减速电机厂家?
能推荐几个适合买微小型齿轮减速电机的厂家吗?作为福建地区设备生产商、五金机电经销商或是自动化系统集成商，找合适的微小型齿轮减速电机供应商，始终绕不开… · 2026/9/24 21:28:01
供应商全生命周期管理：准入、评估、分级与退出实操指南 做了十几年采购，跟供应商打交道的时间比跟家人还多。这些年踩过的坑、填过的洞，让我越来越确信一件事：采购管理最大的成本，从来不是单价，而是供应商管理失控后的隐性损耗——来料不良导致的停线、交期延误带来的空运账… · 2026/9/24 21:28:01
数据科学与大数据技术专业本科生秋招能直接投算法岗吗 数据科学与大数据技术专业本科生秋招可以直接投递算法岗，但仅适用于满足三个前置条件的同学，一是在校完整修完机器学习深度学习等核心专业课程且均分不低于80分，二是至少完成2个可落地的算法相关项目，三是能预留3个月以上时间准备… · 2026/9/24 21:27:42
团结引擎1.6.12打鸿蒙包实战：从环境配置到真机调试全记录 上周四晚上十一点，我盯着 PC 上那行红色报错，旁边躺着第三罐功能饮料，脑子里只有一个念头：为什么一个看起来并不复杂的“团结引擎 1.6.12 打鸿蒙包”的操作，能让我耗掉大半个晚上。 这个项目本身不复杂：一… · 2026/9/24 21:27:35
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
