[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 ~~~ <br/> >[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 } ~~~ 注意：这里要这么写不能按照他文档中的写法如果按照文档中写法会报错： 未知的自定义元素：<context-menu> - 您是否正确注册了组件？ 对于递归组件，请确保提供“名称”选项。 >[success] ## 使用案例 ~~~ // html部分 <template> <div> <VueContextMenu class="right-menu" ref="contextMenu" :target="contextMenuTarget" :show="contextMenuVisible" @update:show="(show) => contextMenuVisible = show"> <p @click="copyMsg">复制</p> <p @click="quoteMsg">引用</p> <p @click="deleteMsg">删除</p> </VueContextMenu> </div> </template> // 这里的@update:show="(show) => contextMenuVisible = show" 也可以去掉然后把上面的自定义属性改成 // :show.sync="contextMenuVisible"也是好用的 // js部分 <script> 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('点击删除') } } } </script> // css部分 <style lang="scss" scoped> /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; } } </style> ~~~ ~~~ 这里'为什么要写样式'呢，因为npm后不知道是什么原因样式没有引入进来，就只能这样使用时候把样式写到 用到'右键菜单'的.vue文件中，或者弄一个全局的css文件写到里面也可以。 ~~~ <br/> >[danger] ## 需要注意 实际开发中element ui的tree插件的右键功能跟这个右键功能有冲突，在点击右键时候element ui的tree插件是好用的，右键菜单不好用，如图：  解决办法： ~~~ treeNodeRightClick(nodeData){ // 右键左侧树 // 右键树的事件的时候调用右键菜单的方法把event对象传入进去就好用了 // this.$refs.contextMenu是右键菜单的组件 this.$refs.contextMenu.contextMenuHandler(event) } ~~~