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-menuref="menu">
<ulclass="options">
<li @click="onClick('A')">Option A</li>
<li @click="onClick('B')">Option B</li>
</ul>
</context-menu>
<script>
constcontextMenu=require('vue-lil-context-menu')
module.exports={
components:{
'context-menu': contextMenu
},
methods:{
onClick(opt){
console.log('Clicked', opt)
}
}
}
</script>
<stylescoped>
.options{
width:250px;
border:1pxblacksolid;
}
</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: