diff --git a/docs/usage/advanced-usage.md b/docs/usage/advanced-usage.md index 86f3116..7213ffe 100644 --- a/docs/usage/advanced-usage.md +++ b/docs/usage/advanced-usage.md @@ -16,19 +16,17 @@ otherwise the context menu will not function properly. Right click on me

- - + +
  • + + Option 1 + +
  • +
  • + + Option 2 - {{ data.foo }} + +
  • @@ -41,19 +39,19 @@ otherwise the context menu will not function properly. components: { VueContext }, methods: { - onClick (text, data) { + onClick(text, data) { alert(`You clicked "${text}"!`); console.log(data); // => { foo: 'bar' } - } - } + }, + }, }; ``` ## Props -There are six props available on the context menu: +There are many props available on the context menu. Some of them include: - `closeOnClick` - `closeOnScroll` @@ -98,7 +96,7 @@ can be used and the accessiblity attributes can be added to each menu item. export default { components: { VueContext }, - data () { + data() { return { // when set to true, the context menu will close when clicked on closeOnClick: true, @@ -116,13 +114,15 @@ can be used and the accessiblity attributes can be added to each menu item. tag: 'ul', // This is how the component is able to find each menu item. Useful if you use non-recommended markup - itemSelector: ['.custom-item-class'] + itemSelector: ['.custom-item-class'], }; - } + }, }; ``` +See [the api](/docs/vue-context/v6/api/vue-context) for more information on props. + ## Events There are two events emitted by the context menu: @@ -165,15 +165,15 @@ The `open` event is emitted when the context menu is shown and receives the foll components: { VueContext }, methods: { - onClose () { + onClose() { console.log('The context menu was closed'); }, - onOpen (event, data, top, left) { + onOpen(event, data, top, left) { console.log('The context menu was opened'); console.log(event, data, top, left); - } - } + }, + }, }; ``` @@ -249,7 +249,7 @@ There is no limit on how far you can nest the menus, the only requirement is to import 'vue-context/src/sass/vue-context.scss'; // Alternatively import into a stylesheet instead export default { - components: { VueContext } + components: { VueContext }, }; ```