vue2项目实现自定义右键菜单, 可添加图标、事件等

通常浏览器都会有自己的右键菜单，如下图的谷歌浏览器网页上的右键菜单：

下面介绍一下如何在vue的项目中实现自定义菜单，如下图所示 ：

1. 安装依赖包

npm install vue-contextmenujs

2. 在main.js中引用

import Contextmenu from 'vue-contextmenujs';
Vue.use(Contextmenu);

3. 在需要实现自定义右键的元素上加上 @contextmenu.prevent="onContextmenu"

<div class="CodeMirror-Contain" @contextmenu.prevent="onContextmenu">
    <textarea ref="codeMirror"></textarea>
</div>

4. methods中添加方法

// 鼠标右键事件
onContextmenu(event) {
    this.$contextmenu({
        items: this.contextMenuData,
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
    });
    return false;
},

5.  contextMenuData 的数据如下

this.contextMenuData = [
    {
        label: '运行',
        icon: 'iconfont icon-zhihang',
        onClick: () => {
            this.onRunCode();
        }
    },
    {
        label: '运行',
        icon: 'iconfont icon-sql_exec_new',
        onClick: () => {
            this.onRunCodeNewTab();
        }
    },
    {
        label: '收藏',
        icon: 'iconfont icon-baocun1',
        divided: true,
        onClick: () => {
            this.onCommitOrder();
        }
    },
    {
        label: '格式化',
        icon: 'iconfont icon-geshihua1',
        onClick: () => {
            this.onFormatSQL();
        }
    }
];

contextMenuData中，label是文字，onClick是绑定的点击事件，icon是图标，我这里用的阿里的iconfont，如果想使用ElementUI的图标，可以把icon的值设置为 icon el-icon-edit。第一个参数必填，固定为icon，第二个参数就是ElementUI图标库里对应的类名。

icon: 'icon el-icon-edit',

 如果帮助到您了，可以留下一个赞👍告诉我