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），仅供参考 shadcn-vue Context Menu 组件完整指南：从安装到源码级解析
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），仅供参考