From 924203f4f23a2e95f0079669f467d62876904683 Mon Sep 17 00:00:00 2001 From: Randall Wilk Date: Wed, 3 Apr 2019 11:43:33 -0500 Subject: [PATCH] Update docs --- README.md | 2 +- docs/2.0.1.md | 135 -------------------------------------------------- 2 files changed, 1 insertion(+), 136 deletions(-) delete mode 100644 docs/2.0.1.md diff --git a/README.md b/README.md index db26a9f..4caf029 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ The menu disappears when you expect by utilizing `vue-clickaway` and it also opt ![Screenshot](screenshot.png) ## 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 diff --git a/docs/2.0.1.md b/docs/2.0.1.md deleted file mode 100644 index 5003ae2..0000000 --- a/docs/2.0.1.md +++ /dev/null @@ -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 -
- -
-

- Right click on me -

-
- - -
    -
  • Option 1
  • -
  • Option 2
  • -
-
- -
-``` - -`@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 -
- -

- Right click on me -

- - - - - -
-``` - -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 \ No newline at end of file