[TOC]

>[success] # :-: vue-右键菜单功能

[在线demo点击我](https://xunleif2e.github.io/vue-context-menu/demo/dist/#/)

项目中有时候会有右键菜单的需求，所以在github找了一个[右键菜单](https://github.com/xunleif2e/vue-context-menu)的插件，使用方法如下：

>[success] ## 安装

~~~

npm install @xunlei/vue-context-menu

~~~

>[success] ## 注册组件

1.全局注册，在main.js引入如下以下文件

~~~

import VueContextMenu from '@xunlei/vue-context-menu'

Vue.use(VueContextMenu)

~~~

2.局部注册，在使用到的.vue文件引入

~~~

import { component as VueContextMenu } from '@xunlei/vue-context-menu'

正确写法：

components: { VueContextMenu }

错误写法(文档中写法)：

components: { 'vue-context-menu': VueContextMenu }

~~~

注意：这里要这么写不能按照他文档中的写法如果按照文档中写法会报错： 未知的自定义元素： - 您是否正确注册了组件？ 对于递归组件，请确保提供“名称”选项。

>[success] ## 使用案例

~~~

// html部分

// 这里的@update:show="(show) => contextMenuVisible = show" 也可以去掉然后把上面的自定义属性改成

// :show.sync="contextMenuVisible"也是好用的

// js部分

import { component as VueContextMenu } from '@xunlei/vue-context-menu'

export default {

components: { VueContextMenu },

data(){

return{

contextMenuTarget:document.body, // 可右键区域，这里也可以绑定$refs

contextMenuVisible:false // 控制菜单显示隐藏

}

},

methods: {

copyMsg(){

alert('点击复制')

},

quoteMsg(){

alert('点击引用')

},

deleteMsg(){

alert('点击删除')

}

}

}

// css部分

/deep/ td.table_td_h {

padding: 17px 0;

}

/deep/ .right-menu {

display: none;

position: fixed;

background: #fff;

border: 1px solid #bababa;

border-radius: 3px;

z-index: 999;

box-shadow: 2px 2px 3px 0px rgba(51, 42, 40, 0.7);

border-radius: 1px;

p{

margin: 0;

display: block;

width: 200px;

height: 35px;

line-height: 35px;

text-align: left;

padding: 0 24px 0 32px;

color: #000000;

cursor: pointer;

font-size: 15px;

border-bottom: 1px solid #e8eaed;

&:hover{

background: #e8eaed;

}

}

.menu-disable{

cursor: no-drop;

color: #80868b;

}

}

~~~

~~~

这里'为什么要写样式'呢，因为npm后不知道是什么原因样式没有引入进来，就只能这样使用时候把样式写到

用到'右键菜单'的.vue文件中，或者弄一个全局的css文件写到里面也可以。

~~~

>[danger] ## 需要注意

实际开发中element ui的tree插件的右键功能跟这个右键功能有冲突，在点击右键时候element ui的tree插件是好用的，右键菜单不好用，如图：


解决办法：

~~~

treeNodeRightClick(nodeData){ // 右键左侧树

// 右键树的事件的时候调用右键菜单的方法把event对象传入进去就好用了

// this.$refs.contextMenu是右键菜单的组件

this.$refs.contextMenu.contextMenuHandler(event)

}

~~~