wz-context-menu
A simple context menu component for Vue.js with elegent API.
Example
Instead of writing context menu items in template
, wz-context-menu
provides a $contextMenu
API, so you can dynamic dynamically change context menu options to suite your needs.
Whenever you need a context menu:
<template> <!-- only a single line in template, you don't have to write <context-menu></context-menu> in your template. --> <button @contextmenu="_handleContextmenu($event)"></button></template> <script> // perpare commands, which can be modified at runtime commands = [ { title: 'Delete', hook: 'del', icon: 'fa fa-trash'} ] export default { methods: { _handleContextMenu(event => { // call context menu this.$contextMenu({ commands, event }) .then(hook => { // all handlers at one place }) }) } }</script>
Checkout the demo.
Installation
Webpack
npm install wz-context-menu --save
Vue
API
Installation
Vue.use(WzContextMenu, { prevent: true })
prevent
: if true, default context menu behavior would be prevented. Default:false
.
Call
this.$contextMenu({ commands, event }).then(hook => {})
event
: a native DOM event.wz-context-menu
use it to locate itself.command
: should look like this:title
hook
: optional. If hook is undefined, wz-context-menu would use title as hook.icon
: optional. It's a set of class names split by spaces, if you are using icon fonts (like font-awesome).type
: optional. One ofdanger
. Actually it just would be a CSS class name of the DOM of a context menu item, so whatever you want as long as you wrote CSS classes for that type.
title: 'Cut' hook: 'cut' icon: 'fa fa-scissor' type: 'danger'
License
MIT.
Wendell Hu, 2018.