vue 右鍵彈出菜單

效果圖

代碼

這是項目里用到的，點擊右鍵，彈出菜單，查詢資料，找到vue-contextmenu

項目地址：https://github.com/chIIC/vue-contextmenu

 安裝：

npm install vue-contextmenu --save

引入：

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

使用：

<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 {
    // 菜單數據
       contextMenuData: {
         menuName: 'demo',
         //菜單顯示的位置
         axis: {
           x: null,
           y: null
         },
         //菜單選項
         menulists: [{
           fnHandler: 'home', //綁定事件
           icoName: 'fa fa-home fa-fw', //icon圖標
           btnName: '回到主頁' //菜單名稱
         }, {
             fnHandler: 'deletedata',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '刪除布局'
         }]
       }
  },
  methods: {
    showMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
    homed () {
      alert("主頁")
    },
    deletedata () {
      console.log('delete!')
    }
  }
}
</script>