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

通常浏览器都会有自己的右键菜单

如下图的谷歌浏览器网页上的右键菜单：

介绍一下如何在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