Vue—-right-click pop-up menu (vue-contextmenu)_vue right-click pop-up menu_VIVI Xiao’s blog

class=”markdown_views prism-atom-one-dark”>

Requirements: Right-click, pop-up menu, query information, find vue-contextmenu.
Project address: https://github.com/chIIC/vue-contextmenu

Installation:

npm install vue-contextmenu --save
 

Introduction:

import VueContextMenu from 'vue-contextmenu'
 Vue.use(VueContextMenu)
 

Use:

template
 div id="app" @contextmenu="showMenu"
     style="width: 100px;height: 100px;margin-top: 20px;background: red;">
     <vue-context-menu :contextMenuData="contextMenuData"
         @home="home"
         @deletedata="deletedata"/vue-context-  menu>
 /div
 /template
 script
 export default {
     
   name: 'app',
   data () {
     
     return {
     
     // menu data
        contextMenuData: {
     
          menuName: 'demo',
          //The position where the menu is displayed
          axis: {
     
            x: null,
            y: null
          },
          //menu options
          menulists: [{
     
            fnHandler: 'home', //binding event
            icoName: 'fa fa-home fa-fw', //icon icon
            btnName: 'Back to the home page' //menu name
          }, {
     
              fnHandler: 'deletedata',
              icoName: 'fa fa-minus-square-o fa  -fw',
              btnName: 'Delete Layout'
          }]
        }
   },
   methods: {
     
     showMenu () {
     
         event.preventDefault()
         var x = event.clientX
         var y = event.clientY
         // Get the current location
       this.contextMenuData.axis = {
     
         x, y
       }
     },
     home () {
     
       alert("home page")
     },
     deletedata () {
     
       console.log('delete!')
     }
   }
 }
 /script