Merge pull request #2 from timwis/user-data

Support passing user data via scoped slots

README.md

@@ -39,5 +39,23 @@ module.exports = {
 </style>
 ```
 
+If you'd like to pass any context from the original `oncontextmenu`
+event down to your menu template, you can pass it as the second
+param of `open` and access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
+under the `userData` property. For example:
+
+```html
+<div @contextmenu.prevent="$refs.menu.open($event, 'foo')">
+  ...
+</div>
+
+<context-menu ref="menu">
+  <template scope="child">
+    <li @click="onClick('A', child.userData)">Option A</li>
+    <li @click="onClick('B', child.userData)">Option B</li>
+  </template>
+</context-menu>
+```
+
 ## Related
 - [vue-context-menu](https://github.com/vmaimone/vue-context-menu)

index.vue

@@ -5,9 +5,9 @@
     :style="style"
     tabindex="-1"
     @blur="close"
-    @click.capture="close"
+    @click="close"
     @contextmenu.capture.prevent>
-    <slot></slot>
+    <slot :user-data="userData"></slot>
   </div>
 </template>
 
@@ -19,7 +19,8 @@ module.exports = {
   data () {
     return {
       x: null,
-      y: null
+      y: null,
+      userData: null
     }
   },
   computed: {
@@ -34,14 +35,16 @@ module.exports = {
     }
   },
   methods: {
-    open (evt) {
+    open (evt, userData) {
       this.x = evt.pageX || evt.clientX
       this.y = evt.pageY || evt.clientY
+      this.userData = userData
       Vue.nextTick(() => this.$el.focus())
     },
     close (evt) {
       this.x = null
       this.y = null
+      this.userData = null
     }
   }
 }