{"id":18880289,"url":"https://github.com/hunlongyu/vue3-contextmenu","last_synced_at":"2026-02-20T13:30:17.479Z","repository":{"id":38097777,"uuid":"325466298","full_name":"Hunlongyu/vue3-contextmenu","owner":"Hunlongyu","description":"vue3 contextmenu. vue3 右键菜单","archived":false,"fork":false,"pushed_at":"2023-07-18T06:57:21.000Z","size":4233,"stargazers_count":46,"open_issues_count":25,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T04:17:03.354Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hunlongyu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-30T05:47:17.000Z","updated_at":"2025-01-29T12:28:06.000Z","dependencies_parsed_at":"2024-06-18T18:30:52.797Z","dependency_job_id":"a496d517-bda8-4bb7-a6b4-2c59a7beddd9","html_url":"https://github.com/Hunlongyu/vue3-contextmenu","commit_stats":{"total_commits":83,"total_committers":7,"mean_commits":"11.857142857142858","dds":"0.32530120481927716","last_synced_commit":"fb14d185c930785924941eda57fc281323eaf51d"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hunlongyu%2Fvue3-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hunlongyu%2Fvue3-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hunlongyu%2Fvue3-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hunlongyu%2Fvue3-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hunlongyu","download_url":"https://codeload.github.com/Hunlongyu/vue3-contextmenu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239846371,"owners_count":19706759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T06:43:05.529Z","updated_at":"2026-02-20T13:30:17.446Z","avatar_url":"https://github.com/Hunlongyu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 注意 `同页面多菜单---\u003e需传参指定ContextMenu Name`\n\n# vue3-contextmenu\n\n由 Vue3 和 Typescript 编写的 Contextmenu 右键菜单组件。\n\n[官网 \u0026 文档 \u0026 示例](https://hunlongyu.github.io/vue3-contextmenu/)\n\n### 截图\n![vue3-contextmenu.png](https://i.loli.net/2021/01/06/n8JgY9MW5bqeax2.png)\n\n### 安装\n```bash\n$ npm i -S vue3-contextmenu\n\n# or\n\n$ yarn add vue3-contextmenu\n```\n\n### 使用\n\nmian.ts\n```js\nimport contextmenu from 'vue3-contextmenu'\nimport 'vue3-contextmenu/dist/vue3-contextmenu.css'\napp.use(contextmenu)\n```\n\napp.vue\n```html\n\u003ctemplate\u003e\n  \u003ccontext-menu name=\"context-menu-1\"\u003e\n    \u003ccontext-menu-submenu :label=\"'查看'\"\u003e\n      \u003ccontext-menu-item disabled\u003e图标\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e列表\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e详细信息\u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-submenu :label=\"'排序方式'\"\u003e\n      \u003ccontext-menu-item\u003e名称\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e日期\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e类型\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e大小\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item disabled\u003e时长\u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-item @click=\"refresh\" :divider=\"true\"\u003e刷新\u003c/context-menu-item\u003e\n    \u003ccontext-menu-item @itemClickHandle=\"itemClickEvent\" :divider=\"true\"\u003e停止\u003c/context-menu-item\u003e\n    \u003ccontext-menu-submenu :label=\"'自定义'\" divider\u003e\n      \u003ccontext-menu-item\u003e二级菜单\u003c/context-menu-item\u003e\n      \u003ccontext-menu-submenu :label=\"'多级菜单'\"\u003e\n        \u003ccontext-menu-item\u003e三级菜单\u003c/context-menu-item\u003e\n        \u003ccontext-menu-item\u003e嵌套菜单\u003c/context-menu-item\u003e\n      \u003c/context-menu-submenu\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-submenu :label=\"'新建'\" divider\u003e\n      \u003ccontext-menu-item\u003e新建文件\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e新建文件夹\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e快捷方式\u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-item :disabled=\"true\"\u003e属性\u003c/context-menu-item\u003e\n  \u003c/context-menu\u003e\n\n  \u003cdiv v-contextmenu=\"{name: 'context-menu-1', id: '123'}\"\u003e右键点击区域{id: '123'}\u003c/div\u003e\n  \u003cdiv @contextmenu=\"openContextMenu\"\u003e右键点击区域{ id: [1, 2, 3]}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n\nimport { inject } from 'vue'\n\nexport default {\n  name: 'App',\n  setup () {\n    const emitContext = inject('emitContext') as (event: Event, dataId: Record\u003cstring, unknown\u003e) =\u003e void\n\n    function refresh () {\n      alert('刷新')\n    }\n\n    function openContextMenu (e: any) {\n      emitContext(e, { name: 'context-menu-1', id: [1, 2, 3] })\n    }\n\n    function itemClickEvent (e: any) {\n      console.log('停止，自定义id:' + e.id)\n    }\n\n    return { refresh, itemClickEvent, openContextMenu }\n  }\n}\n\u003c/script\u003e\n```\n\n### 说明\n\n| 参数     | 说明                 | 类型    | 默认值  |\n| -------- | -------------------- | ------- | ------- |\n| label    | 子菜单标题文字       | String  | `null`  |\n| disabled | 是否禁用菜单         | Boolean | `false` |\n| divider  | 是否在下方显示分割线 | Boolean | `false` |\n| itemClickHandle | 菜单绑定的点击事件, 参数为自定义数据。如： `{ id: 123 }` | any | `undefinded` |\n\n\n可根据 `class` 自定义样式覆盖\n\n* `v-contextmenu`: 根元素\n* `v-contextmenu-item`: 单个菜单\n* `v-contextmenu-item:hover`: 单个菜单鼠标悬浮激活状态\n* `v-contextmenu-item--disabled`: 单个菜单禁用状态\n* `v-contextmenu-divider`: 分割线\n* `v-contextmenu-submenu-label`: 子菜单标题\n* `v-contextmenu-submenu-right`: 子菜单向右箭头\n* `v-contextmenu-submenu-children`: 子菜单容器\n\n\n\n\n## Project setup\n```\nyarn install\nyarn serve\nyarn build\nyarn lint\n```\n\n\n# vue3-contextmenu (ENGLISH TRANSLATION)\n\nEnglish translation (with the help of google translator) !ONLY! \n\nRight-click menu component for Vue3 writte in Typescript\n\nOfficial website, documentation and example in chinese (https://hunlongyu.github.io/vue3-contextmenu/) \n\n### Screenshot\n![vue3-contextmenu.png](https://i.loli.net/2021/01/06/n8JgY9MW5bqeax2.png)\n\n### Installation\n```bash\n$ npm i -S vue3-contextmenu\n\n# or\n\n$ yarn add vue3-contextmenu\n```\n\n### How-To\n\nmain.ts\n```js\nimport contextmenu from 'vue3-contextmenu'\nimport 'vue3-contextmenu/dist/vue3-contextmenu.css'\napp.use(contextmenu)\n```\n\napp.vue\n```html\n\u003ctemplate\u003e\n  \u003ccontext-menu\u003e\n    \u003ccontext-menu-submenu :label=\"'View'\"\u003e\n      \u003ccontext-menu-item disabled\u003e Icon \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e List \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e Detailed information \u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-submenu :label=\"'Sort by'\"\u003e\n      \u003ccontext-menu-item\u003e Name \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e Date \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e Type \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003e Size \u003c/context-menu-item\u003e\n      \u003ccontext-menu-item disabled\u003e Duration \u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-item @click=\"refresh\" :divider=\"true\"\u003e Refresh \u003c/context-menu-item\u003e\n    \u003ccontext-menu-item @itemClickHandle=\"itemClickEvent\" :divider=\"true\"\u003e Stop \u003c/context-menu-item\u003e\n    \u003ccontext-menu-submenu :label=\"'Custom'\" divider\u003e\n      \u003ccontext-menu-item\u003e Secondary menu \u003c/context-menu-item\u003e\n      \u003ccontext-menu-submenu :label=\"'Multi level menu'\"\u003e\n        \u003ccontext-menu-item\u003eThree level menu\u003c/context-menu-item\u003e\n        \u003ccontext-menu-item\u003eNested menu\u003c/context-menu-item\u003e\n      \u003c/context-menu-submenu\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-submenu :label=\"'New'\" divider\u003e\n      \u003ccontext-menu-item\u003eNew file\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003eNew folder\u003c/context-menu-item\u003e\n      \u003ccontext-menu-item\u003eShortcut\u003c/context-menu-item\u003e\n    \u003c/context-menu-submenu\u003e\n    \u003ccontext-menu-item :disabled=\"true\"\u003eProperties\u003c/context-menu-item\u003e\n  \u003c/context-menu\u003e\n\n  \u003cdiv v-contextmenu=\"{id: '123'}\"\u003eRight click on area {id: '123'}\u003c/div\u003e\n  \u003cdiv v-contextmenu=\"{id: [1, 2, 3]}\"\u003eRight click on area { id: [1, 2, 3]}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n\nimport { inject } from 'vue'\n\nexport default {\n  name: 'App',\n  setup () {\n    const emitContext = inject('emitContext') as (event: Event, dataId: Record\u003cstring, unknown\u003e) =\u003e void\n\n    function refresh () {\n      alert('refresh')\n    }\n\n    function openContextMenu (e: any) {\n      emitContext(e, { id: [1, 2, 3] })\n    }\n\n    function itemClickEvent (e: any) {\n      console.log('Stop; with id:' + e.id)\n    }\n\n    return { refresh, itemClickEvent, openContextMenu }\n  }\n}\n\u003c/script\u003e\n```\n\n### 说明\n\n| 参数     | 说明                 | 类型    | 默认值  |\n| -------- | -------------------- | ------- | ------- |\n| label    | Submenu title text       | String  | `null`  |\n| disabled | Toggle enable_/disable of menu         | Boolean | `false` |\n| divider  | Show dividing line below item | Boolean | `false` |\n| itemClickHandle | Event on element click, contains custom id as event attribute `id´ | any | `undefinded` |\n\n\nCss classes that may be customized\n\n* `v-contextmenu`: Root element\n* `v-contextmenu-item`: contextmenu item\n* `v-contextmenu-item:hover`: contextmenu item, in hovered state\n* `v-contextmenu-item--disabled`: contextmenu item, disabled state\n* `v-contextmenu-divider`: menu divider line\n* `v-contextmenu-submenu-label`: Submenu title\n* `v-contextmenu-submenu-right`: Right arrow in submenu\n* `v-contextmenu-submenu-children`: submenu container\n\n\n\n\n## Project setup\n```\nyarn install\nyarn serve\nyarn build\nyarn lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunlongyu%2Fvue3-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunlongyu%2Fvue3-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunlongyu%2Fvue3-contextmenu/lists"}