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

本篇内容介绍了"vue怎么实现自定义全局右键菜单"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

效果如图所示：

注意：

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

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

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

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;        },    }}

二、定义公共组件ContextMenu.vue

三、在组件中使用

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(){        // ...    }}

"vue怎么实现自定义全局右键菜单"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！