{"id":13491053,"url":"https://github.com/xunleif2e/vue-context-menu","last_synced_at":"2025-03-28T07:31:49.125Z","repository":{"id":48592090,"uuid":"95218875","full_name":"xunleif2e/vue-context-menu","owner":"xunleif2e","description":"🗃️ Vue 2.x 右键菜单组件，菜单内容可以随意自定义","archived":false,"fork":false,"pushed_at":"2021-07-19T08:12:03.000Z","size":392,"stargazers_count":336,"open_issues_count":14,"forks_count":58,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-01T11:34:25.739Z","etag":null,"topics":["component","context-menu","plugin","vue"],"latest_commit_sha":null,"homepage":"https://xunleif2e.github.io/vue-context-menu/demo/dist/#/","language":"JavaScript","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/xunleif2e.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}},"created_at":"2017-06-23T12:37:11.000Z","updated_at":"2024-12-12T05:53:56.000Z","dependencies_parsed_at":"2022-08-25T10:10:19.155Z","dependency_job_id":null,"html_url":"https://github.com/xunleif2e/vue-context-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xunleif2e%2Fvue-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xunleif2e%2Fvue-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xunleif2e%2Fvue-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xunleif2e%2Fvue-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xunleif2e","download_url":"https://codeload.github.com/xunleif2e/vue-context-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245989282,"owners_count":20705799,"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":["component","context-menu","plugin","vue"],"created_at":"2024-07-31T19:00:53.151Z","updated_at":"2025-03-28T07:31:49.119Z","avatar_url":"https://github.com/xunleif2e.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-context-menu\n\n\u003e Vue 2.0 右键菜单组件，菜单内容可以随意自定义\n\n![Preview](https://github.com/binggg/vue-context-menu/blob/master/demo/assets/demo.jpeg?raw=true)\n\n## 安装\n```\nnpm install @xunlei/vue-context-menu\n```\n\n## 在线Demo\n\nhttps://xunleif2e.github.io/vue-context-menu/demo/dist\n\n## 使用\n\n### 1. 注册组件\n\n#### 方式1 利用插件方式全局注册\n\n```javascript\nimport VueContextMenu from '@xunlei/vue-context-menu'\nimport Vue from 'vue'\n\nVue.use(VueContextMenu)\n```\n#### 方式2 局部注册\n\n```javascript\nimport { component as VueContextMenu } from '@xunlei/vue-context-menu'\n\nexport default {\n  // ...\n  components: {\n    'vue-context-menu': VueContextMenu\n  }\n}\n```\n\n#### 方式3 独立版本引入，自动全局注册\n\u003e 前提是 vue 也是独立版本通过script标签引入\n\n```html\n\u003cscript src=\"./node_modules/dist/vue-context-menu.js\"\u003e\u003c/script\u003e\n```\n\n### 2. 模版语法\n```html\n \u003ccontext-menu class=\"right-menu\" \n    :target=\"contextMenuTarget\" \n    :show=\"contextMenuVisible\" \n    @update:show=\"(show) =\u003e contextMenuVisible = show\"\u003e\n    \u003ca href=\"javascript:;\" @click=\"copyMsg\"\u003e复制\u003c/a\u003e\n    \u003ca href=\"javascript:;\" @click=\"quoteMsg\"\u003e引用\u003c/a\u003e\n    \u003ca href=\"javascript:;\" @click=\"deleteMsg\"\u003e删除\u003c/a\u003e\n\u003c/context-menu\u003e\n```\n\n## Props\n\n| 参数                    | 说明  | 类型 | 可选值 | 默认值 |\n|-------------------------|-------|------|--------|--------|\n| target | 触发右键事件的元素  | Element | -      | -      |\n| show | 是否显示右键菜单  | Boolean | -      | false      |\n\n\n## Events\n\n| 事件名                    | 说明  | 事件参数\n|-------------------------|-------|------|\n| update:show | 右键菜单显示/隐藏时触发  | 是否显示 |\n\n\n## 注意\n\n如果target是某个兄弟元素，可以使用 `$refs`来访问，但是注意请在父组件mounted 之后获取。\n\n参考 https://cn.vuejs.org/v2/guide/components.html#子组件索引\n\n\n## ChangeLog\n- [1.0.1] 2017-07-10\n  - 修复 target 为空时可能出错的bug\n\n- [1.0.0] 2017-06-23\n  - 实现右键菜单基本功能\n\n## Development Setup\n\n``` bash\n# install deps\nnpm install\n\n# serve demo at localhost:8080\nnpm run dev\n\n# build library and demo\nnpm run build\n\n# build library\nnpm run build:library\n\n# build demo\nnpm run build:demo\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2017 赵兵\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxunleif2e%2Fvue-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxunleif2e%2Fvue-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxunleif2e%2Fvue-context-menu/lists"}