mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-28 03:54:02 +03:00
Randall Wilk
135 lines
3.6 KiB
Markdown
135 lines
3.6 KiB
Markdown
# vue-context
|
|
|
|
A simple yet flexible context menu component for Vue. It is styled for the standard `ul` tag, but any menu template can be used.
|
|
The only dependency this package has is Vue, so the majority of styling is up to you, and any package styles for the menu
|
|
can easily be overridden.
|
|
|
|
The menu disappears when you expect by using the `onblur` event and also disappears when clicked on.
|
|
|
|
## Note
|
|
|
|
This documentation is for version 2.0.1 of vue-context. For the most up-to-date version
|
|
of the package and documentation, please visit [vue-context](https://github.com/rawilk/vue-context).
|
|
|
|
## Getting Started
|
|
|
|
The following instructions will help you get the vue-context menu up and running on your project.
|
|
|
|
### Installation
|
|
|
|
Using npm:
|
|
```bash
|
|
$ npm install vue-context@2.0.1 --save
|
|
```
|
|
|
|
## Basic Usage
|
|
|
|
Import the package and use in your Vue instance, and add a simple method for the click event.
|
|
|
|
```js
|
|
import Vue from 'vue';
|
|
import vContext from 'vue-context';
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
components: {
|
|
vContext
|
|
},
|
|
methods: {
|
|
/**
|
|
* Alert the text of the menu item clicked on.
|
|
*
|
|
* @param text
|
|
*/
|
|
onClick(text) {
|
|
alert(`You clicked ${text}!`);
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
Add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
|
|
|
|
```html
|
|
<div id="app">
|
|
|
|
<div>
|
|
<p @contextmenu.prevent="$refs.menu.open">
|
|
Right click on me
|
|
</p>
|
|
</div>
|
|
|
|
<v-context ref="menu">
|
|
<ul>
|
|
<li @click="onClick($event.target.innerText)">Option 1</li>
|
|
<li @click="onClick($event.target.innerText)">Option 2</li>
|
|
</ul>
|
|
</v-context>
|
|
|
|
</div>
|
|
```
|
|
|
|
`@contextmenu.prevent` is the event listener needed to open the context menu. It is using `.prevent` as a modifier to prevent the
|
|
the default behavior. It has a ref of `menu`, which is what `$refs.menu` is referring to. When each item is clicked on, the text of
|
|
the item is sent to the `onClick` method on the Vue instance, which is then shown in an alert.
|
|
|
|
## Advanced Usage
|
|
|
|
To pass any data from the `contextmenu` event to your template, you can pass it as the second parameter of `open` and
|
|
access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) under the `userData` property.
|
|
|
|
```html
|
|
<div id="app">
|
|
|
|
<p @contextmenu.prevent="$refs.menu.open($event, 'foo')">
|
|
Right click on me
|
|
</p>
|
|
|
|
<v-context ref="menu">
|
|
<template scope="child">
|
|
<ul>
|
|
<li @click="onClick($event.target.innerText, child.userData)">Option 1</li>
|
|
<li @click="onClick($event.target.innerText, child.userData)">Option 2</li>
|
|
</ul>
|
|
</template>
|
|
</v-context>
|
|
|
|
</div>
|
|
```
|
|
|
|
Now the `onClick` method on the Vue instance has access to any user data passed to it, which in this case this the string `foo`. The
|
|
`userData` can also be used to output dynamic content to the context menu.
|
|
|
|
```js
|
|
import Vue from 'vue';
|
|
import vContext from 'vue-context';
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
components: {
|
|
vContext
|
|
},
|
|
methods: {
|
|
/**
|
|
* Alert the text of the menu item clicked on. Console log the data sent from the menu.
|
|
*
|
|
* @param text
|
|
* @param userData
|
|
*/
|
|
onClick(text, userData) {
|
|
alert(`You clicked ${text}!`);
|
|
console.log(userData);
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## Credits
|
|
|
|
vue-context is inspired from [vue-lil-context-menu](https://github.com/timwis/vue-lil-context-menu)
|
|
and [Vue.JS Right Click Menu](http://vuejsexamples.com/vue-js-right-click-menu/). Ultimately vue-context is intended
|
|
to provide a simple and lightweight context menu for Vue.
|
|
|
|
## License
|
|
|
|
MIT |