vue实现自定义全局右键菜单

export default {
    /**
     * menuContent格式：
     * [
     *      {
     *          name: "新建文件",   // 操作名
     *          method: "createDirectory",  // 需要执行的对应组件中的方法
     *             disabled: true        // 是否禁用，可以根据页面具体逻辑进行调整
     *      }
     * ]
     * 
     * 
     * 整体右键菜单采用绝对定位，所以clientX、clientY代表是left和top定位
     */
    state: {
        menuContent: [],    // 右键菜单内容
        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;
        },
    }
}

import { mapState } from "vuex";
// ...

computed: {
    ...mapState(["contextMenu"])
},
created(){
    bus.$on("operateDirectory", (param) => {
    // 点击右键菜单时，应触发组件内的同名方法，首先应判断该方法是否在本组件内存在，存在则调用
        if(this[param]){
            this[param]();
        }
    });
},
// ...

methods: {
    showContextMenu(event, data) {
        event.preventDefault();        // 阻止浏览器的默认事件
        const menuCOntent= {
            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(){
        // ...
    }
}