2020-07-01 自定义鼠标右键

vue-contextmenujs     参考文章 

Vue 原生实现右键菜单组件, 零依赖

项目地址:https://github.com/GitHub-Laziji/menujs

快速安装

        npm 安装    npm install vue-contextmenujs

        CDN     <script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

使用

    测试中使用的是element-ui图标

exportdefault{methods: {    onContextmenu(event) {this.$contextmenu({items: [          {label:"返回(B)",onClick:()=>{this.message ="返回(B)";console.log("返回(B)");            }          },          {label:"前进(F)",disabled:true},          {label:"重新加载(R)",divided:true,icon:"el-icon-refresh"},          {label:"另存为(A)..."},          {label:"打印(P)...",icon:"el-icon-printer"},          {label:"投射(C)...",divided:true},          {label:"使用网页翻译(T)",divided:true,minWidth:0,children: [{label:"翻译成简体中文"}, {label:"翻译成繁体中文"}]          },          {label:"截取网页(R)",minWidth:0,children: [              {label:"截取可视化区域",onClick:()=>{this.message ="截取可视化区域";console.log("截取可视化区域");                }              },              {label:"截取全屏"}            ]          },          {label:"查看网页源代码(V)",icon:"el-icon-view"},          {label:"检查(N)"}        ],        event,//x: event.clientX,//y: event.clientY,customClass:"class-a",zIndex:3,minWidth:230});returnfalse;    }  }};