Skip to content

jiang6641/vue-contextmenu

 
 

Repository files navigation

vue

Contextmenu component for vue2

Use Setup

install vue-contextmenu

npm install vue-contextmenu --save

Vue mount

// mount with global
import VueContextMenu from 'vue-contextmenu'
import 'vue-contextmenu/style/css/font-awesome.min.css'
Vue.use(VueContextMenu)

Use in SPA

<template>
  <div id="app" @contextmenu="showMenu" style="width: 100px;height: 100px;background: red;">
    <vue-context-menu :contextMenuData="contextMenuData"
	                  @savedata="savedata"
	                  @newdata="newdata">
    </vue-context-menu>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data () {
      return {
      	// contextmenu data (菜单数据)
        contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
          menuName: 'demo',
        // The coordinates of the display(菜单显示的位置)
          axis: {
            x: null,
            y: null
          },
        // Menu options (菜单选项)
          menulists: [
            {
              fnHandler: 'savedata', // Binding events(绑定事件)
              icoName: 'fa fa-home fa-fw', // icon (icon图标 )
              btnName: 'Save' // The name of the menu option (菜单名称)
            },
            {
              fnHandler: 'newdata',
              icoName: 'fa fa-home fa-fw',
              btnName: 'New'
            }
          ]
        }
      }
    },
    methods: {
      showMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
        this.contextMenuData.axis = {
          x, y
        }
      },
      savedata () {
      	alert(1)
      },
      newdata () {
      	console.log('newdata!')
      }
    }
  }
</script>

Use in SPA(List Rendering)

<template>
  <div>
    <div @contextmenu="showMenu(index)"
         style="width: 100px;height: 100px;background: red;margin-top: 20px;"
         v-for="(n, index) in 4" :key="n" >
         <vue-context-menu :contextMenuData="contextMenuData"
                           :transferIndex="transferIndex"
                           @savedata="savedata(index)"
                           @newdata="newdata"></vue-context-menu>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data () {
      return {
        transferIndex: null, // Show the menu that was clicked
        contextMenuData: {
          menuName: 'demo',
          axis: {
            x: null,
            y: null
          },
          menulists: [
            {
              fnHandler: 'savedata',
              icoName: 'fa fa-home fa-fw',
              btnName: 'Save'
            },
            {
              fnHandler: 'newdata',
              icoName: 'fa fa-home fa-fw',
              btnName: 'New'
            }
          ]
        }
      }
    },
    methods: {
      showMenu (index) {
        this.transferIndex = index // tranfer index to child component
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        this.contextMenuData.axis = {
          x, y
        }
      },
      savedata (e) {
        console.log('click:' + e)
      },
      newdata () {
        console.log(2222)
      }
    }
  }
</script>

Email

Test demo(use in spa and use in List Rendering)

Image text

Image text

About

contextmenu component for Vue2

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.6%
  • Vue 2.4%