{"id":16259748,"url":"https://github.com/pipipi-pikachu/v-contextmenu-directive","last_synced_at":"2026-03-16T14:12:43.374Z","repository":{"id":41161086,"uuid":"296796393","full_name":"pipipi-pikachu/v-contextmenu-directive","owner":"pipipi-pikachu","description":"简约漂亮的指令式右键菜单插件（基于 Vue2.x ）","archived":false,"fork":false,"pushed_at":"2021-03-08T02:00:08.000Z","size":548,"stargazers_count":43,"open_issues_count":1,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T11:50:33.239Z","etag":null,"topics":["contextmenu","directive","vue","vue-contextmenu","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pipipi-pikachu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-19T05:53:46.000Z","updated_at":"2024-12-12T07:27:11.000Z","dependencies_parsed_at":"2022-09-19T01:30:46.807Z","dependency_job_id":null,"html_url":"https://github.com/pipipi-pikachu/v-contextmenu-directive","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/pipipi-pikachu%2Fv-contextmenu-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipipi-pikachu%2Fv-contextmenu-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipipi-pikachu%2Fv-contextmenu-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipipi-pikachu%2Fv-contextmenu-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pipipi-pikachu","download_url":"https://codeload.github.com/pipipi-pikachu/v-contextmenu-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244515624,"owners_count":20464923,"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","directive","vue","vue-contextmenu","vue2"],"created_at":"2024-10-10T16:04:44.511Z","updated_at":"2026-03-16T14:12:43.294Z","avatar_url":"https://github.com/pipipi-pikachu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌈 v-contextmenu-directive\n\n\u003e 基于 Vue2.x 的右键菜单插件。\n\nDEMO: https://pipipi-pikachu.github.io/v-contextmenu-directive/demo/\n\n\n## 📦 安 装\n```bash\nnpm install v-contextmenu-directive\n# or\nyarn add v-contextmenu-directive\n```\n\n\n## 📚 如何使用？\n```javascript\nimport Vue from 'vue'\n\nimport 'v-contextmenu-directive/dist/v-contextmenu-directive.css'\nimport Contextmenu from 'v-contextmenu-directive'\n\nVue.use(Contextmenu)\n```\n\n\n### 基础用法：\n```html\n\u003c!-- template --\u003e\n\u003cdiv v-contextmenu=\"contextmenus\"\u003e\u003c/div\u003e\n```\n```javascript\n// script\nmethods: {\n  contextmenus() {\n    return [\n      {\n        text: '剪切',\n        subText: 'Ctrl + X',\n      },\n      {\n        text: '复制',\n        subText: 'Ctrl + C',\n      },\n      {\n        text: '粘贴',\n        subText: 'Ctrl + V',\n      },\n      { divider: true },\n      {\n        text: '删除',\n        subText: 'Delete',\n      },\n    ]\n  }\n},\n```\n\n\n### 多级菜单：\n```javascript\nmethods: {\n  contextmenus() {\n    return [\n      {\n        text: '二级菜单',\n        children: [\n          { text: '子菜单1' },\n          { text: '子菜单2' },\n          {\n            text: '三级菜单',\n            children: [\n              { text: '子菜单1' },\n              { text: '子菜单2' },\n            ],\n          },\n        ],\n      },\n    ]\n  }\n}\n```\n\n\n### 事件和点击对象：\n```html\n\u003c!-- template --\u003e\n\u003cdiv v-contextmenu=\"el =\u003e contextmenus(el)\"\u003e\n  {{msg}}\n\u003c/div\u003e\n```\n```javascript\n// script\nmethods: {\n  contextmenus(el) {\n\n    // 获取触发右键菜单的dom；与action中的el一致\n    // 注意：一般情况下你不应该向contextmenus方法传递动态参数，因为它不会自动更新，正确的做法是向触发右键菜单的dom上绑定dataset，然后在这里通过el.dataset来获取动态的值\n    console.log(el)\n\n    // 你可以在这里通过 return null 来禁用右键菜单\n    // return null\n\n    return [\n      {\n        text: '剪切',\n        subText: 'Ctrl + X',\n        action: () =\u003e this.msg = '你点击了剪切'\n      },\n      {\n        text: '复制',\n        subText: 'Ctrl + C',\n        action: el =\u003e {\n          this.msg = '你点击了复制'\n          console.log(el)\n        }\n      },\n    ]\n  }\n}\n```\n\n\n### dom激活右键菜单的状态：\n挂载指令的dom在右键菜单被激活的情况下，会被添加一个contextmenu-active的class\n```html\n\u003c!-- template --\u003e\n\u003cdiv id=\"app\" v-contextmenu=\"contextmenus\"\u003e\u003c/div\u003e\n```\n\n```css\n#app {\n  background-color: #fff;\n}\n#app.contextmenu-active {\n  background-color: #f5f5f5;\n}\n```\n\n\n### 主题：\n右键菜单默认主题为light，你可以添加dark修饰符来使用dark主题\n```html\n\u003c!-- template --\u003e\n\u003cdiv id=\"app\" v-contextmenu.dark=\"contextmenus\"\u003e\u003c/div\u003e\n```\n\n\n## 📒 完整参数\n| prop           | type     | 描述                                           |\n|----------------|----------|-----------------------------------------------|\n| text           | string   | 菜单项文字                                      |\n| subText        | string   | 菜单项文字补充                                   |\n| action         | function | 菜单项点击后执行的方法                            |\n| divider        | bool     | 分割线，与其他参数不共存                           |\n| children       | array    | 子菜单                                          |\n| disable        | bool     | 禁用菜单项                                       |\n| hide           | bool     | 隐藏菜单项                                       |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpipipi-pikachu%2Fv-contextmenu-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpipipi-pikachu%2Fv-contextmenu-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpipipi-pikachu%2Fv-contextmenu-directive/lists"}