Vue2 右键/左键点击菜单

介绍

记录一个Vue2右键点击或者左键选中的菜单

快速查看

• 该组件适合页面的右键点击或者左键选中点击

组件使用

• 组件的开源仓库 (opens new window)

第一步 npm

npm i vue-contextmenu

第二步 在入口文件main.js注册

// mount with global
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

第三步 在Vue中使用

• @contextmenu 是绑定右键点击显示 是组件自带的
• @click 是绑定点击事件 适合左键点击后显示

<template>
<!-- 这里是在整个盒子中绑定右键点击显示 -->
<div id="app" @contextmenu="showMenu"
    style="width: 100px;height: 100px;margin-top: 20px;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>

• 可以按需设置menu的方法哦