[TOC]
>[success] # :-: vue-右键菜单功能
[在线demo点击我](https://xunleif2e.github.io/vue-context-menu/demo/dist/#/)
项目中有时候会有右键菜单的需求，所以在github找了一个[右键菜单](/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部分
ref="contextMenu"
:target="contextMenuTarget"
:show="contextMenuVisible"
@update:show="(show) => contextMenuVisible = show">
复制
引用
删除
// 这里的@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)
}
~~~
