{"id":13701335,"url":"https://github.com/rawilk/vue-context","last_synced_at":"2025-05-04T21:30:45.343Z","repository":{"id":44382167,"uuid":"100658687","full_name":"rawilk/vue-context","owner":"rawilk","description":"A simple vue context menu component.","archived":true,"fork":false,"pushed_at":"2022-10-04T18:30:34.000Z","size":3075,"stargazers_count":258,"open_issues_count":0,"forks_count":58,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-22T17:59:02.370Z","etag":null,"topics":["context-menu","vue","vue-context"],"latest_commit_sha":null,"homepage":"https://randallwilk.dev/docs/vue-context","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/rawilk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"rawilk"}},"created_at":"2017-08-18T01:08:28.000Z","updated_at":"2025-02-11T19:11:53.000Z","dependencies_parsed_at":"2022-07-14T13:20:50.991Z","dependency_job_id":null,"html_url":"https://github.com/rawilk/vue-context","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Fvue-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Fvue-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Fvue-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Fvue-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rawilk","download_url":"https://codeload.github.com/rawilk/vue-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403697,"owners_count":21742413,"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","vue","vue-context"],"created_at":"2024-08-02T20:01:30.200Z","updated_at":"2025-05-04T21:30:44.803Z","avatar_url":"https://github.com/rawilk.png","language":"JavaScript","funding_links":["https://github.com/sponsors/rawilk"],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# Attention:\n\nI no longer have the ability or interest in maintaining this package since I am not using Vue in any of my projects\nanymore, so I am abandoning `vue-context`. If your project depends on vue-context, please feel free to fork and maintain\nthe package yourself, or use an [alternative context menu package](#alternatives).\n\n# vue-context\n\n[![npm version](https://img.shields.io/npm/v/vue-context.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-context)\n[![npm downloads](https://img.shields.io/npm/dt/vue-context.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-context)\n[![GitHub issues](https://img.shields.io/github/issues/rawilk/vue-context.svg?style=for-the-badge)](https://github.com/rawilk/vue-context/issues)\n[![GitHub stars](https://img.shields.io/github/stars/rawilk/vue-context.svg?style=for-the-badge)](https://github.com/rawilk/vue-context/stargazers)\n[![VueJS version](https://img.shields.io/badge/vue.js-2.x-green.svg?style=for-the-badge)](https://vuejs.org)\n\n`vue-context` provides a simple yet flexible context menu for Vue. It is styled for the standard `\u003cul\u003e` tag, but any menu template can be used.\nThe menu is lightweight with its only dependency being `vue-clickaway`. The menu has some basic styles applied to it, but they can be easily \noverridden by your own styles.\n\u003cbr\u003e\u003cbr\u003e\nThe menu disappears when you expect by utilizing `vue-clickaway` and it also optionally disappears when clicked on.\n\n![Screenshot](docs/images/screenshot.jpg)\n\n## Getting Started\n\nThe following instructions will help you get the vue-context menu up and running on\nyour project.\n\n### Installation\n\nUsing npm:\n```bash\nnpm i vue-context\n```\n\n## Basic Usage\n\nImport the component and use it in your app.\n\n```js\nimport Vue from 'vue';\nimport VueContext from 'vue-context';\n\nnew Vue({\n    components: {\n        VueContext\n    },\n    \n    methods: {\n        onClick (text) {\n            alert(`You clicked ${text}!`);\n        }\n    }\n}).$mount('#app');\n```\n\nNext add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.\n\n```html\n\u003cdiv id=\"app\"\u003e\n\n    \u003cdiv\u003e\n        \u003cp @contextmenu.prevent=\"$refs.menu.open\"\u003e\n            Right click on me\n        \u003c/p\u003e    \n    \u003c/div\u003e\n    \n    \u003cvue-context ref=\"menu\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\" @click.prevent=\"onClick($event.target.innerText)\"\u003eOption 1\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\" @click.prevent=\"onClick($event.target.innerText)\"\u003eOption 2\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/vue-context\u003e\n    \n\u003c/div\u003e\n```\n\n\u003e **Notice:** As of version **4.1.0**, the menu styles are not automatically included by default anymore.\n\u003e You will need to manually import them now in your own stylesheets.\n\n```bash\n@import '~vue-context/dist/css/vue-context.css';\n\n// Or\n@import '~vue-context/src/sass/vue-context';\n```\n\n## Documentation\n\nFor full documentation, go here: https://randallwilk.dev/docs/vue-context.\n\nIf you would like to contribute to the documentation, you can edit the docs found here: https://github.com/rawilk/vue-context/tree/master/docs\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).\n\n- [rawilk](https://github.com/rawilk)\n- [wol-soft](https://github.com/wol-soft)\n- [nachodd](https://github.com/nachodd)\n- [Nberezhnoy](https://github.com/Nberezhnoy)\n\n## Alternatives\n\n- [vue-context-menu](https://github.com/vmaimone/vue-context-menu)\n- [@overcoder/vue-context-menu](https://github.com/MicroDroid/vue-context-menu)\n\nSee [awesome-vue](https://github.com/vuejs/awesome-vue#context-menu) for other alternatives.\n\n## License\n\n`vue-context` uses the MIT License (MIT). Please see the [license file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Fvue-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frawilk%2Fvue-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Fvue-context/lists"}