Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue context menu

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

This component lets you create a new context menu (vue context-menu component).

If you right click on a component, the context menu can show up. This can be any HTML component and it replaces the traditional right click menu.

As shown below:


context menu

Example Usage
An example below:


<div @contextmenu.prevent="$refs.ctxMenu.open">
...
</div>

<context-menu id="context-menu" ref="ctxMenu">
<li @click="doSomething(...)">option 1</li>
<li class="disabled">option 2</li>
<li>option 3</li>
</context-menu>

<script>
import contextMenu from 'vue-context-menu'
export default {
name: 'my-component',
components: { contextMenu },
methods: { doSomething }
...
}
</script>

Build Setup
To install, type these commands:

# install dependencies
npm install

# compiles src/*.vue and builds a bundle for static linking
npm run build

# runs Karma with test/*.js
npm run test

# runs webpack-dev-server
npm run dev

Vue 1.x Support

Haven’t migrated to Vue 2.x yet?

npm install [email protected]`

Github: http://github.com/vmaimone/vue-context-menu#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy