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

import Vue from 'vue'
import WzContextMenu from 'wz-context-menu'

Vue.use(WzContextMenu, { prevent: true })

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 of danger. 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.