mirror of
https://github.com/tenrok/vue-context.git
synced 2026-06-21 18:20:33 +03:00
Code restructure (#1)
This commit is contained in:
Randall Wilk
@@ -3,15 +3,22 @@
|
||||
[](https://www.npmjs.org/package/vue-context)
|
||||
[](https://www.npmjs.org/package/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
|
||||
A simple yet flexible context menu 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.
|
||||
The menu disappears when you expect by using the `onblur` even and it also
|
||||
disappears when clicked on.
|
||||
|
||||
## Note
|
||||
The API has changed. Check [v2.0.1 documentation](https://github.com/rawilk/vue-context/blob/master/docs/2.0.1.md)
|
||||
if you use the old version.
|
||||
|
||||
## Getting Started
|
||||
|
||||
The following instructions will help you get the vue-context menu up and running on your project.
|
||||
The following instructions will help you get the vue-context menu up and running on
|
||||
your project.
|
||||
|
||||
### Installation
|
||||
|
||||
@@ -22,111 +29,117 @@ $ npm install vue-context --save
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Import the package and use in your Vue instance, and add a simple method for the click event.
|
||||
Import the package and use it in your Vue instance, and add a simple method
|
||||
for the click event.
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import vContext from 'vue-context';
|
||||
import { VueContext } 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}!`);
|
||||
}
|
||||
}
|
||||
});
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Alert the text of the menu item that was clicked on.
|
||||
*
|
||||
* @param {string} text
|
||||
*/
|
||||
onClick (text) {
|
||||
alert(`You clicked ${text}!`);
|
||||
}
|
||||
}
|
||||
}).$mount('#app');
|
||||
```
|
||||
|
||||
Add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
|
||||
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>
|
||||
<p @contextmenu.prevent="$refs.menu.open">
|
||||
Right click on me
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<vue-context ref="menu">
|
||||
<ul>
|
||||
<li @click="onClick($event.target.innerText)">Option 1</li>
|
||||
<li @click="onClick($event.target.innerText)">Option 2</li>
|
||||
</ul>
|
||||
</vue-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.
|
||||
`@contextmenu.prevent` is the event listener needed to open the context menu. It is using
|
||||
`.prevent` as a modifier to prevent 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.
|
||||
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 `data` property`. `$event` must be passed as the first parameter,
|
||||
otherwise the context menu will not function properly.
|
||||
|
||||
```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>
|
||||
|
||||
|
||||
<p @contextmenu.prevent="$refs.menu.open($event, { foo: 'bar' })">
|
||||
Right click on me
|
||||
</p>
|
||||
|
||||
<vue-context ref="menu">
|
||||
<ul slot-scope="child">
|
||||
<li @click="onClick($event.target.innerText, child.data)">Option 1</li>
|
||||
<li @click="onClick($event.target.innerText, child.data)">Option 2</li>
|
||||
</ul>
|
||||
</vue-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.
|
||||
Now the `onClick` method on the Vue instance has access to any user data passed to it,
|
||||
which in this case is an object with a property named `foo`. The `data` slot scope
|
||||
can also be used to output dynamic content to the context menu.
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import vContext from 'vue-context';
|
||||
import { VueContext } 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
components: {
|
||||
VueContext
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Alert the text of the menu item that was clicked on.
|
||||
* Console log the data sent from the menu.
|
||||
*
|
||||
* @param {string} text
|
||||
* @param {object} data
|
||||
*/
|
||||
onClick (text, data) {
|
||||
alert(`You clicked ${text}!`);
|
||||
console.log(data);
|
||||
// => { foo: 'bar' }
|
||||
}
|
||||
}
|
||||
}).$mount('#app');
|
||||
```
|
||||
|
||||
## 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.
|
||||
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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user