Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue mouse menu

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

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