https://github.com/codekraft-studio/vue-context-menu
Functional and customizable context menu for VueJs
https://github.com/codekraft-studio/vue-context-menu
context-menu vuejs vuejs-components
Last synced: 3 months ago
JSON representation
Functional and customizable context menu for VueJs
- Host: GitHub
- URL: https://github.com/codekraft-studio/vue-context-menu
- Owner: codekraft-studio
- License: mit
- Created: 2018-12-17T08:29:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-27T09:34:58.000Z (over 6 years ago)
- Last Synced: 2025-01-16T01:28:57.275Z (4 months ago)
- Topics: context-menu, vuejs, vuejs-components
- Language: Vue
- Size: 608 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-context-menu
> functional and customizable context menu for VueJs
[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]
Check out the [demo](https://codekraft-studio.github.io/vue-context-menu/) to see it in action.
## Installation
Download the project using your favorite package manager:
```
npm install @codekraft-studio/vue-context-menu
yarn add @codekraft-studio/vue-context-menu
```
Than import it in your project and load it:
```js
import Vue from 'vue'
import VueContextMenu from '@codekraft-studio/vue-context-menu'
Vue.use(VueContextMenu)
```
## Usage
It's very simple to use, first you need to setup your context menu components with the menu template you desire:
```html
- First action
- Second action
```
You should assign a reference name to the component so it's accessible inside your component instance and template scope through `$refs` object, in case of the example above you can access the context menu via `$refs.SimpleMenu`.
The next step is to bind the context menu to the element(s) where he belongs:
```html
```
When the rightclick (or contextmenu) event occurs on the element your custom menu should appear.
You can also pass a context object to the menu with the element clicked, this is useful in case of dynamic menus or lists:
```html
{{item.name}}
- Edit {{item.name}}
- Remove {{item.name}}
```
In the example above the context menu will open with the `item` value as context and it's forwarded to the menu actions methods.
Be sure to add the `$event` object as __first argument__ of the __open__ method, otherwise it will not work properly.
## Methods
Usually you should use only the __open__ method and bind it to the `@contextmenu` event of your elements, but here a list of the component methods:
#### .open(event, context = {})
Ensure the position of the context menu relative to the target element of the event and shows it, the optional context is forwarded to the menu template scope.
#### .close()
Hide the context menu and reset it's position.
---
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```
### Run your unit tests
```
yarn run test:unit
```
---
## License
This project is released under [MIT License](LICENSE) by [codekraft-studio](https://github.com/codekraft-studio).
[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-context-menu.svg
[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-context-menu
[daviddm-image]: https://david-dm.org/codekraft-studio/vue-context-menu.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/codekraft-studio/vue-context-menu