vue怎么实现自定义全局右键菜单(vue,开发技术)

效果如图所示：

注意：

需要在项目中找到页面整体布局的组件，比如项目使用Home.vue作为整个项目的公共布局，将根元素定位设置成relative，使右键菜单相对于其进行定位。

本文的右键菜单主要使用vuex实现

一、vuex中定义全局状态用于管理右键菜单

exportdefault{/***menuContent格式：*[*{*name:'新建文件',//操作名*method:'createDirectory',//需要执行的对应组件中的方法*disabled:true//是否禁用，可以根据页面具体逻辑进行调整*}*]***整体右键菜单采用绝对定位，所以clientX、clientY代表是left和top定位*/state:{menuContent:[],//右键菜单内容clientX:'',//leftclientY:'',//topdisplayContextMenu: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><divclass="context-menu"v-show="contextMenu.displayContextMenu":><ul><liv-for="(item,i)incontextMenu.menuContent":key="i":class="item.disabled?'disabled':''"@click="emitEvent(item.method)">{{item.name}}</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)=>{//点击右键菜单时，应触发组件内的同名方法，首先应判断该方法是否在本组件内存在，存在则调用if(this[param]){this[param]();}});},//...methods:{showContextMenu(event,data){event.preventDefault();//阻止浏览器的默认事件constmenuContent={menuContent:[{icon:"el-icon-upload2",name:"运行",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.$store.commit("SET_CONTEXT_MENU",menuContent);//再次点击页面，右键菜单消失document.onclick=(event)=>{this.$store.commit("SET_CONTEXT_MENU",{displayContextMenu:false,});};},run(){//...},editConfig(){//...},addCommond(){//...},deleteConfig(){//...}}