vue3+vite的项目中实现右键事件的神器

 前言：

     vue3+vite的项目中实现右键事件的神器：@imengyu/vue3-context-menu

实现效果：

使用步骤：

1、安装 npm/cnpm/pnpm/yarn  都可以，装上下面插件

@imengyu/vue3-context-menu

2、main.js中配置引入

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

const app = createApp(App);
app.use(ContextMenu);

3、页面上使用：

template

<ul
    v-else
    class="list-inlin text-white bg-light p-1 m-2"
    style="border-radius: 2px;"
    @click="handleDownload()"
    @contextmenu.stop="onContextMenu($event)"  
  >
    //因为有其他的点击事件，.stop是必须的，不然冒泡了
...

ts中

<script lang="ts" setup>

  import ContextMenu from '@imengyu/vue3-context-menu';

const onContextMenu = (e: MouseEvent) => {
    ContextMenu.showContextMenu({
      x: e.x,
      y: e.y,
      items: [
        {
          label: '转发',
          onClick: () => {
            forwardingMessage();
          },
        },
        {
          label: '引用',
          onClick: () => {
            alert('引用')
          },
        },
        {
          label: '撤回',
          onClick: () => {
            alert('撤回')
          },
        },
      ],
    });
  };