mirrors/vue-context
2
0
Fork 0
mirror of https://github.com/tenrok/vue-context.git synced 2026-06-18 04:50:33 +03:00
Code Activity

wip

Browse Source
This commit is contained in:
Randall Wilk
2020-08-31 07:36:52 -05:00
committed by GitHub
parent 16fbd4ea73
commit 0fd4ef158a
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/usage/advanced-usage.md
+25 -25
View File
@@ -16,19 +16,17 @@ otherwise the context menu will not function properly.
Right click on me Right click on me
</p> </p>
<vue-context ref="menu"> <vue-context ref="menu" v-slot="{ data }">
<template slot-scope="child"> <li>
<li> <a @click.prevent="onClick($event.target.innerText, data)">
<a @click.prevent="onClick($event.target.innerText, child.data)"> Option 1
Option 1 </a>
</a> </li>
</li> <li v-if="data">
<li> <a @click.prevent="onClick($event.target.innerText, data)">
<a @click.prevent="onClick($event.target.innerText, child.data)"> Option 2 - {{ data.foo }}
Option 2 </a>
</a> </li>
</li>
</template>
</vue-context> </vue-context>
</div> </div>
</template> </template>
@@ -41,19 +39,19 @@ otherwise the context menu will not function properly.
components: { VueContext }, components: { VueContext },
methods: { methods: {
onClick (text, data) { onClick(text, data) {
alert(`You clicked "${text}"!`); alert(`You clicked "${text}"!`);
console.log(data); console.log(data);
// => { foo: 'bar' } // => { foo: 'bar' }
} },
} },
}; };
</script> </script>
``` ```
## Props ## Props
There are six props available on the context menu: There are many props available on the context menu. Some of them include:
- `closeOnClick` - `closeOnClick`
- `closeOnScroll` - `closeOnScroll`
@@ -98,7 +96,7 @@ can be used and the accessiblity attributes can be added to each menu item.
export default { export default {
components: { VueContext }, components: { VueContext },
data () { data() {
return { return {
// when set to true, the context menu will close when clicked on // when set to true, the context menu will close when clicked on
closeOnClick: true, closeOnClick: true,
@@ -116,13 +114,15 @@ can be used and the accessiblity attributes can be added to each menu item.
tag: 'ul', tag: 'ul',
// This is how the component is able to find each menu item. Useful if you use non-recommended markup // 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'],
}; };
} },
}; };
</script> </script>
``` ```
See [the api](/docs/vue-context/v6/api/vue-context) for more information on props.
## Events ## Events
There are two events emitted by the context menu: 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 }, components: { VueContext },
methods: { methods: {
onClose () { onClose() {
console.log('The context menu was closed'); 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('The context menu was opened');
console.log(event, data, top, left); console.log(event, data, top, left);
} },
} },
}; };
</script> </script>
``` ```
@@ -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 import 'vue-context/src/sass/vue-context.scss'; // Alternatively import into a stylesheet instead
export default { export default {
components: { VueContext } components: { VueContext },
}; };
</script> </script>
``` ```