mirror of
https://github.com/tenrok/vue-context.git
synced 2026-06-09 04:42:23 +03:00
Update docs
This commit is contained in:
Randall Wilk
@@ -15,7 +15,7 @@ The menu disappears when you expect by utilizing `vue-clickaway` and it also opt
|
||||
|
||||
|
||||
## Note
|
||||
The API has changed. Check [v2.0.1 documentation](https://github.com/rawilk/vue-context/blob/master/docs/2.0.1.md)
|
||||
The API has changed since the last major release. Check [v2 documentation](https://vue-context.randallwilk.com/docs/2.0/overview)
|
||||
if you use the old version.
|
||||
|
||||
## Getting Started
|
||||
|
||||
-135
@@ -1,135 +0,0 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user