{"id":13457794,"url":"https://github.com/CyberNika/v-contextmenu","last_synced_at":"2025-03-24T14:32:23.047Z","repository":{"id":31888162,"uuid":"109382605","full_name":"CyberNika/v-contextmenu","owner":"CyberNika","description":"🖱 ContextMenu based on Vue 3 \u0026 Vue 2","archived":false,"fork":false,"pushed_at":"2024-06-16T09:51:57.000Z","size":6627,"stargazers_count":934,"open_issues_count":43,"forks_count":115,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-18T15:48:41.812Z","etag":null,"topics":["contextmenu","vue","vue-component","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://cybernika.github.io/v-contextmenu/","language":"TypeScript","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/CyberNika.png","metadata":{"files":{"readme":"README.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}},"created_at":"2017-11-03T10:24:33.000Z","updated_at":"2025-03-18T02:01:00.000Z","dependencies_parsed_at":"2024-09-27T18:00:31.067Z","dependency_job_id":"6546be65-9924-46ce-99f8-6ea07c83776a","html_url":"https://github.com/CyberNika/v-contextmenu","commit_stats":{"total_commits":70,"total_committers":3,"mean_commits":"23.333333333333332","dds":0.02857142857142858,"last_synced_commit":"fced33a1bb5cd4680282a2a1596130817e00cdd7"},"previous_names":["snokier/v-contextmenu","cybernika/v-contextmenu","heynext/v-contextmenu"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Fv-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Fv-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Fv-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberNika%2Fv-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyberNika","download_url":"https://codeload.github.com/CyberNika/v-contextmenu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245289658,"owners_count":20591113,"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":["contextmenu","vue","vue-component","vue2","vue3"],"created_at":"2024-07-31T09:00:37.225Z","updated_at":"2025-03-24T14:32:22.694Z","avatar_url":"https://github.com/CyberNika.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# v-contextmenu\n\n[![NPM version][badge-npm-version]][url-npm]\n[![NPM download][badge-npm-download]][url-npm]\n[![NPM version][badge-language]][url-github]\n![License][badge-license]\n[![Node version][badge-node-version]][url-npm]\n\n[![NPM][image-npm]][url-npm]\n\n适用于 **Vue 3.0** 的 **ContextMenu** 组件。\n\n\u003e 适用于 Vue 2.0 的文档见 https://github.com/CyberNika/v-contextmenu/blob/2.x/docs/usage.md\n\n**简体中文 | [(WIP) English](./README_EN.md)**\n\n## 🚀 安装\n\n### NPM 安装（推荐）\n\n```bash\n$ npm i -S v-contextmenu # yarn add v-contextmenu\n```\n\n### CDN 引入\n\n可通过 [unpkg.com/v-contextmenu](https://unpkg.com/v-contextmenu) 获取最新版本的资源，在页面中引入相应 js 和 css 文件即可。\n\n```html\n\u003c!-- 引入 Vue --\u003e\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\n\u003c!-- 引入 VContextmenu 组件 --\u003e\n\u003cscript src=\"https://unpkg.com/v-contextmenu/dist/index.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- 引入 VContextmenu 组件样式 --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/v-contextmenu/dist/themes/default.css\"\n/\u003e\n```\n\n```javascript\n// 全局注册\nVue.use(window.contextmenu);\n\n// 或按需注册\nconst { directive, Contextmenu, ContextmenuItem } = window.contextmenu;\n\nexport default {\n  directives: {\n    contextmenu: directive,\n  },\n\n  components: {\n    [Contextmenu.name]: Contextmenu,\n    [ContextmenuItem.name]: ContextmenuItem,\n  },\n};\n```\n\n## 🏖 概览\n\n[访问在线示例](https://CyberNika.github.io/v-contextmenu)\n\n![概览](./docs/images/gallery.jpg)\n\n## 🎏 使用\n\n### 全局注册\n\n```javascript\nimport contextmenu from \"v-contextmenu\";\nimport \"v-contextmenu/dist/themes/default.css\";\n\nVue.use(contextmenu);\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cv-contextmenu ref=\"contextmenu\"\u003e\n    \u003cv-contextmenu-item\u003e菜单1\u003c/v-contextmenu-item\u003e\n    \u003cv-contextmenu-item\u003e菜单2\u003c/v-contextmenu-item\u003e\n    \u003cv-contextmenu-item\u003e菜单3\u003c/v-contextmenu-item\u003e\n  \u003c/v-contextmenu\u003e\n\n  \u003cdiv v-contextmenu:contextmenu\u003e右键点击此区域\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### 按需注册\n\n```HTML\n\u003ctemplate\u003e\n  \u003cv-contextmenu ref=\"contextmenu\"\u003e\n    \u003cv-contextmenu-item\u003e菜单1\u003c/v-contextmenu-item\u003e\n    \u003cv-contextmenu-item\u003e菜单2\u003c/v-contextmenu-item\u003e\n    \u003cv-contextmenu-item\u003e菜单3\u003c/v-contextmenu-item\u003e\n  \u003c/v-contextmenu\u003e\n\n  \u003cdiv v-contextmenu:contextmenu\u003e右键点击此区域\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { directive, Contextmenu, ContextmenuItem } from \"v-contextmenu\";\nimport \"v-contextmenu/dist/themes/default.css\";\n\nexport default {\n  directives: {\n    contextmenu: directive,\n  },\n\n  components: {\n    [Contextmenu.name]: Contextmenu,\n    [ContextmenuItem.name]: ContextmenuItem,\n  }\n}\n\u003c/script\u003e\n```\n\n详细使用方法见 [在线站点][url-homepage] \u0026 [文档](./docs/usage.md)\n\n## 🎨 主题\n\n**默认**\n\n`v-contextmenu/dist/themes/default.css`\n\n![default](./docs/images/default.jpg)\n\n**亮色**\n\n`v-contextmenu/dist/themes/bright.css`\n\n![bright](./docs/images/bright.jpg)\n\n**暗色**\n\n`v-contextmenu/dist/themes/dark.css`\n\n![dark](./docs/images/dark.jpg)\n\n## 🛠 开发\n\n```bash\n$ pnpm install # 安装依赖\n$ pnpm dev # 启动开发服务\n```\n\n## 🤖 构建\n\n```bash\n$ pnpm build # 构建 npm 包\n$ pnpm build:site # 构建站点\n```\n\n## 🛎 更新日志\n\n详见 [releases][url-releases]\n\n[badge-npm-version]: https://img.shields.io/npm/v/v-contextmenu/next\n[badge-language]: https://img.shields.io/github/languages/top/CyberNika/v-contextmenu\n[badge-node-version]: https://img.shields.io/node/v/v-contextmenu/next\n[badge-npm-download]: https://img.shields.io/npm/dt/v-contextmenu\n[badge-license]: https://img.shields.io/github/license/CyberNika/v-contextmenu.svg\n[url-npm]: https://npmjs.org/package/v-contextmenu\n[url-dependencies]: https://david-dm.org/vkbansal/v-contextmenu\n[url-releases]: https://github.com/CyberNika/v-contextmenu/releases\n[url-github]: https://github.com/CyberNika/v-contextmenu\n[url-homepage]: https://CyberNika.github.io/v-contextmenu\n[image-npm]: https://nodei.co/npm/v-contextmenu.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCyberNika%2Fv-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCyberNika%2Fv-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCyberNika%2Fv-contextmenu/lists"}