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

npm install vue-contextmenujs

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

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

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

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();
        }
    }
];

icon: 'icon el-icon-edit',