vue 右键菜单(vue-contextmenujs)

1. 安装vue-context-menu

npm install vue-contextmenujs --save
或
yarn add vue-contextmenujs

2. 在main.js中引用

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

3. 给需要点击的元素绑定事件

// 在组件中调用显示菜单
 this.$contextmenu(options:MenuOptions);
// 鼠标点击或滚轮自动销毁, 也可手动销毁
 this.$contextmenu.destroy();

// 去除浏览器默认菜单
 event.preventDefault();

<template>
  <div id="app" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
    // 右键
    onContextmenu(event) {
        event.preventDefault()
        if(event.preventDefault){
            event.preventDefault()
        }else{
            window.event.returnValue = false // 兼容IE6、7、8
        }
        this.$contextmenu({
            items: [
                {
                    label: "返回",
                    onClick: () => {
                        console.log("返回(B)");
                    }
                },
                { label: "前进(F)", disabled: true },
                { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
                { label: "另存为(A)..." },
                { label: "打印(P)...", icon: "el-icon-printer" },
                { label: "投射(C)...", divided: true },
                {
                    label: "使用网页翻译(T)",
                    divided: true,
                    minWidth: 0,
                    children: [
                        { label: "翻译成简体中文" },
                        { label: "翻译成繁体中文" }         
                    ]
                },
                {
                    label: "截取网页(R)",
                    minWidth: 0,
                    children: [{
                            label: "截取可视化区域",
                            onClick: () => {
                                this.message = "截取可视化区域";
                            }
                        },
                        { label: "截取全屏" }
                    ]
                },
                { label: "查看网页源代码(V)", icon: "el-icon-view" },
                { label: "检查(N)" }
            ],
            event,
            //x: event.clientX,
            //y: event.clientY,
            customClass: "custom-class",
            zIndex: 3,
            minWidth: 230
        });
        return false;
    },
</script>