vue-lil-context-menu

1.1.0 • Public • Published

vue-lil-context-menu

A flexible context menu component for Vue. Pass it any menu template you like; it doesn't even have to be a menu. Always disappears when you expect it to by using an onblur event.

<div @contextmenu.prevent="$refs.menu.open">
  ...
</div>
 
<context-menu ref="menu">
  <ul class="options">
    <li @click="onClick('A')">Option A</li>
    <li @click="onClick('B')">Option B</li>
  </ul>
</context-menu>
 
<script>
const contextMenu = require('vue-lil-context-menu')
 
module.exports = {
  components: {
    'context-menu': contextMenu
  },
  methods: {
    onClick (opt) {
      console.log('Clicked', opt)
    }
  }
}
</script> 
 
<style scoped>
.options {
  width: 250px;
  border: 1px black solid;
}
</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 under the userData property. For example:

<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

Readme

Keywords

Package Sidebar

Install

npm i vue-lil-context-menu

Weekly Downloads

1

Version

1.1.0

License

MIT

Last publish

Collaborators

  • timwis