[TOC]

>[success] # :-: vue-右鍵菜單功能

[在線demo點(diǎn)擊我](https://xunleif2e.github.io/vue-context-menu/demo/dist/#/)

項(xiàng)目中有時(shí)候會(huì)有右鍵菜單的需求，所以在github找了一個(gè)[右鍵菜單](https://github.com/xunleif2e/vue-context-menu)的插件，使用方法如下：

>[success] ## 安裝

~~~

npm install @xunlei/vue-context-menu

~~~

>[success] ## 注冊(cè)組件

1.全局注冊(cè)，在main.js引入如下以下文件

~~~

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

Vue.use(VueContextMenu)

~~~

2.局部注冊(cè)，在使用到的.vue文件引入

~~~

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

正確寫(xiě)法：

components: { VueContextMenu }

錯(cuò)誤寫(xiě)法(文檔中寫(xiě)法)：

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

~~~

注意：這里要這么寫(xiě)不能按照他文檔中的寫(xiě)法如果按照文檔中寫(xiě)法會(huì)報(bào)錯(cuò)： 未知的自定義元素： - 您是否正確注冊(cè)了組件？ 對(duì)于遞歸組件，請(qǐng)確保提供“名稱”選項(xiàng)。

>[success] ## 使用案例

~~~

// html部分

ref="contextMenu"

:target="contextMenuTarget"

:show="contextMenuVisible"

@update:show="(show) => contextMenuVisible = show">

復(fù)制

引用

刪除

// 這里的@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, // 可右鍵區(qū)域，這里也可以綁定$refs

contextMenuVisible:false // 控制菜單顯示隱藏

}

},

methods: {

copyMsg(){

alert('點(diǎn)擊復(fù)制')

},

quoteMsg(){

alert('點(diǎn)擊引用')

},

deleteMsg(){

alert('點(diǎn)擊刪除')

}

}

}

// 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;

}

}

~~~

~~~

這里'為什么要寫(xiě)樣式'呢，因?yàn)閚pm后不知道是什么原因樣式?jīng)]有引入進(jìn)來(lái)，就只能這樣使用時(shí)候把樣式寫(xiě)到

用到'右鍵菜單'的.vue文件中，或者弄一個(gè)全局的css文件寫(xiě)到里面也可以。

~~~

>[danger] ## 需要注意

實(shí)際開(kāi)發(fā)中element ui的tree插件的右鍵功能跟這個(gè)右鍵功能有沖突，在點(diǎn)擊右鍵時(shí)候element ui的tree插件是好用的，右鍵菜單不好用，如圖：


解決辦法：

~~~

treeNodeRightClick(nodeData){ // 右鍵左側(cè)樹(shù)

// 右鍵樹(shù)的事件的時(shí)候調(diào)用右鍵菜單的方法把event對(duì)象傳入進(jìn)去就好用了

// this.$refs.contextMenu是右鍵菜單的組件

this.$refs.contextMenu.contextMenuHandler(event)

}

~~~

總結(jié)

以上是生活随笔為你收集整理的vue鼠标右键自定义菜单_vue-右键菜单功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。