基于vue项目右键面板的封装

1. 先安装插件

npm install vue-contextmenujs

2. 在main.js中挂载

import Contextmenujs from 'vue-contextmenujs'
Vue.use(Contextmenujs)

3. 在项目中复制该类代码

/* 
  第一个参数可传递元素或者事件，不接收VueComponent形式。原生组件传递 el => $ref.xxx即可
  第二个参数传递配置项
  第三个参数接收Vue实例
*/
class ContextMenu{
  constructor(event,options,vm){
    if (event instanceof PointerEvent) {
      this.event = event
    }else{
      this.el = event
    }
    this.vm = vm
    this.options = Object.assign({
      customClass: "",
      event,
      zIndex: 999,
      minWidth: 200,
      items:[]
    },options)
  }

  init(){
    if (this.el) {
      this._bindContextMenuEl()
      return
    }
    this._setContextMenu()
  }

  // 当传递的是元素
  _bindContextMenuEl(){
    this.el.addEventListener('contextmenu',(event)=>{
      this.event = event
      this._setContextMenu()
    })
  }

  // 设置右键弹窗
  _setContextMenu(){
    this.vm.$contextmenu.destroy();
    this.options.event = this.event
    this.vm.$contextmenu(this.options);
    // 阻止页面本有的右键弹窗
    this.event.preventDefault()
  }
}
export default ContextMenu

4. 在页面中使用

<div ref="test"></div>
import ContextMenu from './ContextMenu'
export default{
	mounted(){
		const items=[
			{
				label:'下载',
				onclick:()=>{}
			},
			{
				label:'删除',
		        icon: "el-icon-discount",
				onclick:()=>{}
			},
		]
		new ContextMenu(this.$refs.test,{items},this).init()
	}
}

注意：如果是类似el-table此类组件，传递this.$refs.table是无效的，可以传递this.$refs.table.$el。不过一般el-table封装了很多事件，所以在new Context是在第一个参数传递event进去。

上述是基于vue项目的封装，ContextMenu还可以配置更多的项，这里我是根据自己的业务需求简单配置即可，感兴趣的可以去vue-contextmenujs查看更多配置项哈。