鼠标右键 关闭其他页签或者关闭右侧页签

我所用到的是elementUI+Vue，鼠标右键又引用了jQuery及jquery.contextmenu.r2.js

<el-tabs v-model="editableTabsValue" type="card" closable>
  <el-tab-pane :id="item.title" v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name"></el-tab-pane>
</el-tabs> 
<div class="contextMenu" id="myMenu">
   <ul class="ul-list">
       <li id="close">关闭</li>
       <li id="closeOther">关闭其他标签页</li>
       <li id="closeRight">关闭右侧标签页</li>
  </ul>
</div>

其中editableTabs是打开的页签集合，
在methods里面添加方法如下：

handleCurTabs(){
   var _this = this;
   if(!_this.defaultActive){//当前没有开着的页签 就不需要绑定右键事件
       return;
   }
    $('#tab-'+_this.defaultActive).contextMenu('myMenu', { 
        //菜单样式    
        menuStyle: {
            boxSizing: 'border-box'
        }, 
        //菜单项样式    
        itemStyle: {
            fontFamily: 'verdana',
            backgroundColor: '#3d3d3d',
            color: 'white',
            'border-top':'1px solid #5c5c5c',
            'border-bottom':'1px solid #5c5c5c',
            padding: '1px 3px',
            lineHeight:'24px',
            cursor:'pointer'
        }, 
        //菜单项鼠标放在上面样式    
        itemHoverStyle: {
            color: 'white',
            'border-top':'1px solid #5c5c5c',
            'border-bottom':'1px solid #5c5c5c',
            backgroundColor: '#e02222',
            border: 'none'
        },
        //事件       
        bindings: {
            // 关闭
            'close': function(t) {
                _this.removeTab(_this.defaultActive);
            },
            // 关闭其他
            'closeOther': function(t) {
                //写自己的的业务逻辑代码
            },
            // 关闭右侧
            'closeRight': function(t) {
                //写自己的的业务逻辑代码
            }
        }
    })
}, 

在需要的地方引用handleCurTabs即可。
当时遇见问题又很着急，就在网上找了找查到了使用jquery.contextmenu.r2.js的这种方案，亲测可以就在这里分享给大家了。
如果有更好的解决方案，欢迎吐槽。
参考文档：http://down.admin5.com/demo/code_pop/18/731/