[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) } ~~~