{"id":15566931,"url":"https://github.com/imengyu/vue3-context-menu","last_synced_at":"2025-05-14T13:05:51.242Z","repository":{"id":37213193,"uuid":"382360365","full_name":"imengyu/vue3-context-menu","owner":"imengyu","description":"A very simple context menu component for Vue3 一个简洁美观简单的Vue3右键菜单组件","archived":false,"fork":false,"pushed_at":"2025-05-07T07:56:56.000Z","size":1849,"stargazers_count":558,"open_issues_count":8,"forks_count":68,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-07T08:43:16.426Z","etag":null,"topics":["context-menu","contextmenu","menu","rightclickmenu","typescript","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://docs.imengyu.top/vue3-context-menu-docs/en/","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/imengyu.png","metadata":{"files":{"readme":"README.CN.md","changelog":"CHANGELOG.MD","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,"zenodo":null}},"created_at":"2021-07-02T13:49:00.000Z","updated_at":"2025-05-07T07:56:59.000Z","dependencies_parsed_at":"2023-12-13T04:30:14.637Z","dependency_job_id":"2dfaa5d8-ae33-42d7-811a-1809d3c7e61c","html_url":"https://github.com/imengyu/vue3-context-menu","commit_stats":{"total_commits":207,"total_committers":12,"mean_commits":17.25,"dds":0.05797101449275366,"last_synced_commit":"09e0e1f82eb2bcfefc0204a74845d04390af2f88"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue3-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue3-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue3-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imengyu%2Fvue3-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imengyu","download_url":"https://codeload.github.com/imengyu/vue3-context-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149942,"owners_count":22022851,"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":["context-menu","contextmenu","menu","rightclickmenu","typescript","vue3","vuejs"],"created_at":"2024-10-02T17:08:54.108Z","updated_at":"2025-05-14T13:05:51.209Z","avatar_url":"https://github.com/imengyu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# vue3-context-menu\n\n一个使用 Vue3 制作的简洁美观简单的右键菜单组件\n\n![截图](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/first.png)\n\n---\n\n## 特性\n\n* 简洁易用，体积小\n* 提供组件模式和函数模式，调用方便\n* 提供多个菜单主题供您使用\n* 可自定义\n\n### 用法\n\n```\nnpm install -save @imengyu/vue3-context-menu\n```\n\n然后在 main.ts 中导入:\n\n```js\nimport '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'\nimport ContextMenu from '@imengyu/vue3-context-menu'\n\ncreateApp(App).use(ContextMenu)     \n```\n\n然后你就可以在 vue 文件中使用菜单了:\n\n```js\nimport ContextMenu from '@imengyu/vue3-context-menu'\n\nonContextMenu(e : MouseEvent) {\n  //prevent the browser's default menu\n  e.preventDefault();\n  //show your menu\n  ContextMenu.showContextMenu({\n    x: e.x,\n    y: e.y,\n    items: [\n      { \n        label: \"A menu item\", \n        onClick: () =\u003e {\n          alert(\"You click a menu item\");\n        }\n      },\n      { \n        label: \"A submenu\", \n        children: [\n          { label: \"Item1\" },\n          { label: \"Item2\" },\n          { label: \"Item3\" },\n        ]\n      },\n    ]\n  }); \n}\n```\n\n关于详细的用法，请参考文档。\n\n## 文档\n\n[查看文档](https://docs.imengyu.top/vue3-context-menu-docs/)\n\n[查看在线演示](https://docs.imengyu.top/vue3-context-menu-demo/)\n\n## 已有主题\n\n|theme|explain|example image|\n|--|--|--|\n|`default`|Default theme|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-default.jpg)|\n|`default dark`|Default theme with dark|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-default-dark.jpg)|\n|`flat`|Simple flat theme|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-flat.jpg)|\n|`flat dark`|Simple flat theme with dark|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-flat-dark.jpg)|\n|`win10`|Win10 like theme|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-win10.jpg)|\n|`win10 dark`|Win10 like theme with dark|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-win10-dark.jpg)|\n|`mac`|Mac like theme|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-mac.jpg)|\n|`mac dark`|Mac like theme with dark|![example-default-dark.jpg](https://raw.githubusercontent.com/imengyu/vue3-context-menu/main/screenshot/example-mac-dark.jpg)|\n\n## 广告: 作者其他的有用项目\n\n* [vue-code-layout A Vue editor layout component that like VSCode](https://github.com/imengyu/vue-code-layout)\n* [vue-dock-layout A Vue editor layout component that like Visual Studio](https://github.com/imengyu/vue-dock-layout)\n* [vue-dynamic-form A data driven form component for vue3](https://github.com/imengyu/vue-dynamic-form)\n\n## 开发\n\n```shell\ngit clone git@github.com:imengyu/vue3-context-menu.git\ncd vue3-context-menu\nnpm install\nnpm run dev # Development serve project\nnpm run build-demo # Build example project\nnpm run build-lib # Build library project\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimengyu%2Fvue3-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimengyu%2Fvue3-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimengyu%2Fvue3-context-menu/lists"}