Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue mouse menu

Related course:
Fullstack Vue: The Complete Guide to Vue.js

A right-mouse menu plug-in for Vue.js 2+

Right click on an element to open the menu. The context menu can have icons and text, as shown in the image below.


context menu

Requirements

This component needs Bootstrap and fontawesome. By default you have installed these.
If not, you can still run, but the style will not look good.

  • Bootstrap
  • Fontawesome
  • Vue.js 2.x

How to Use

 
npm install vue-mouse-menu --save
import mouseMenu from 'vue-mouse-menu'

import Vue from 'vue'

Vue.use(mouseMenu)

You can create a menu like so:

export default{
data(){
return {
popItems:[
{
class:'fa fa-wrench',
txt:'Configure'
},
{
class:'fa fa-check',
txt:'Check'
},
{
class:'fa fa-ban',
txt:'Delete'
}
],
mousePosition:['close'],
}
},

Github: http://github.com/zgj233/vue-mouse-menu#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy