vue3 右键菜单的两种写法

第一种：v-contextmenu

<template>
    <div v-contextmenu:contextmenu class="capacityManage">
        <code>右键点击此区域</code>
    </div>
    <v-contextmenu ref="contextmenu" class="rightMenu">
        <v-contextmenu-item>删除</v-contextmenu-item>
        <v-contextmenu-item>编辑</v-contextmenu-item>
    </v-contextmenu>
</template>
  
<script>
import { directive, Contextmenu, ContextmenuItem } from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

export default {
    name: "ExampleSimple",
    components: {
        [Contextmenu.name]: Contextmenu,
        [ContextmenuItem.name]: ContextmenuItem,
    },
    directives: {
        contextmenu: directive,
    },
};
</script>

<style scoped>
.capacityManage {
    height: 100%;
}

:deep .v-contextmenu {
    border-color: #444;
    background-color: #000;
    box-shadow: 2px 2px 8px 0px rgba(#000, 0.2);
}

:deep .v-contextmenu-item {
    color: rgba(#fff, 0.9);
}

:deep .v-contextmenu-item--hover {
    background-color: rgba(#444, 0.9) !important;
}
</style>

第二种：Vue3 Context menu

<template>
    <div class="title" @contextmenu="onContextMenu($event)">点击区域</div>
</template>
<script setup name="alarmReal">

import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import ContextMenu from '@imengyu/vue3-context-menu'

const editDatavConfig = (e) => {
    console.log('编辑');
    console.log(e);
}


function delDatavConfig(e) {
    console.log('删除');
    console.log(e);
}

function onContextMenu(e) {
    //prevent the browser's default menu
    e.preventDefault();
    //show your menu
    ContextMenu.showContextMenu({
        theme: 'mac dark',
        x: e.x,
        y: e.y,
        items: [
            {
                label: "编辑",
                onClick: editDatavConfig(e)
            },
            {
                label: "删除",
                onClick: delDatavConfig(e)
            },
        ]
    });
}
</script>
<style scope>
.title {
    font-size: 14px;
    color: #fff;
}
</style>