vue實(shí)現(xiàn)自定義全局右鍵菜單

第vue實(shí)現(xiàn)自定義全局右鍵菜單前段時(shí)間公司在做一個(gè)webIDE項(xiàng)目，其中有對(duì)文件樹的各種操作，主要通過右鍵菜單實(shí)現(xiàn)，今天就來(lái)記錄一下怎么在vue項(xiàng)目中實(shí)現(xiàn)全局的自定義右鍵菜單。效果如圖所示：

注意：

需要在項(xiàng)目中找到頁(yè)面整體布局的組件，比如項(xiàng)目使用Home.vue作為整個(gè)項(xiàng)目的公共布局，將根元素定位設(shè)置成relative，使右鍵菜單相對(duì)于其進(jìn)行定位。

本文的右鍵菜單主要使用vuex實(shí)現(xiàn)

一、vuex中定義全局狀態(tài)用于管理右鍵菜單

exportdefault{

/**

*menuContent格式：

*[

*

{

*

name:'新建文件',

//操作名

*

method:'createDirectory',

//需要執(zhí)行的對(duì)應(yīng)組件中的方法

*

disabled:true

//是否禁用，可以根據(jù)頁(yè)面具體邏輯進(jìn)行調(diào)整

*

}

*]

*

*

*整體右鍵菜單采用絕對(duì)定位，所以clientX、clientY代表是left和top定位

*/

state:{

menuContent:[],

//右鍵菜單內(nèi)容

clientX:'',

//left

clientY:'',

//top

displayContextMenu:false

//是否展示右鍵菜單

},

mutations:{

SET_CONTEXT_MENU:(state,payload)={

state.menuContent=payload.menuContent;

state.clientX=payload.clientX;

state.clientY=payload.clientY;

state.displayContextMenu=payload.displayContextMenu;

},

}

}

二、定義公共組件ContextMenu.vue

template

divv-show="contextMenu.displayContextMenu"

:style="{'left':contextMenu.clientX+'px','top':contextMenu.clientY+'px'}"

ul

liv-for="(item,i)incontextMenu.menuContent":key="i":class="item.disabled'disabled':''"

@click="emitEvent(item.method)"

{{}}

/li

/ul

/div

/template

script

import{mapState}from'vuex';

importbusfrom'@/views/common/bus';

exportdefault{

name:'ContextMenu',

data(){

return{

}

},

computed:{

...mapState(['contextMenu'])

},

methods:{

emitEvent(type){

bus.$emit('operateDirectory',type)

}

}

/script

stylelang="scss"scoped

.context-menu{

position:absolute;

background:#FFF;

color:#34495E;

min-width:100px;

box-shadow:0px2px4px0pxrgba(0,0,0,0.2);

border-radius:2px;

cursor:pointer;

z-index:1002;

ul{

text-align:left;

padding:5px10px;

li{

padding:3px4px;

font-size:12px;

list-style:none;

height:24px;

line-height:24px;

:hover{

background:#EDF6FF;

}

}

.disabled{

color:#888585;

pointer-events:none;

}

}

}

/style

三、在組件中使用

import{mapState}from'vuex';

//...

computed:{

...mapState(['contextMenu'])

created(){

bus.$on('operateDirectory',(param)={

//點(diǎn)擊右鍵菜單時(shí)，應(yīng)觸發(fā)組件內(nèi)的同名方法，首先應(yīng)判斷該方法是否在本組件內(nèi)存在，存在則調(diào)用

if(this[param]){

this[param]();

}

});

//...

methods:{

showContextMenu(event,data){

event.preventDefault();

//阻止瀏覽器的默認(rèn)事件

constmenuContent={

menuContent:[

{

icon:"el-icon-upload2",

name:"運(yùn)行",

method:"run",

},

{

icon:"el-icon-refresh",

name:"編輯",

method:"editConfig",

},

{

icon:"el-icon-refresh",

name:"添加",

method:"addCommond",

},

{

icon:"el-icon-refresh",

name:"刪除",

method:"deleteConfig",

},

],

clientX:event.clientX,

clientY:event.clientY,

displayContextMenu:true,

};

this.$mit("SET_CONTEXT_MENU",menuContent);

//再次點(diǎn)擊頁(yè)面，右鍵菜單消失

document.onclick=(event)={

this.$mit("SET_CONTEXT_MENU",{

displayContextMenu:false,

});

};

},

run(){

//...

},

editConfig(){

//...

},

addCommond(){

//...

},

deleteConfig(){

//...

}

}

總結(jié)

這種可以實(shí)現(xiàn)全局右鍵菜單，并且支持自定義右鍵內(nèi)容，但是