elementUI添加右键事件

要在 ElementUI 的组件上添加右键事件，可以使用以下步骤：

1. 在组件上添加 `@contextmenu.prevent` 事件监听器来阻止默认的右键菜单弹出：

<template>
  <div @contextmenu.prevent>
    <!-- 组件内容 -->
  </div>
</template>

在上面的代码中，我们在组件的最外层包裹了一个 `div` 元素，并在其上添加了 `@contextmenu.prevent` 事件监听器，以阻止默认的右键菜单。

2. 在 `mounted` 钩子函数中，给组件绑定 `@contextmenu` 事件监听器，同时传入事件对象：

mounted() {
  const el = this.$el;
  el.addEventListener('contextmenu', this.handleContextMenu);
},
methods: {
  handleContextMenu(event) {
    event.preventDefault();
    const contextMenu = this.$refs.contextMenu;
    contextMenu.style.top = event.clientY + 'px';
    contextMenu.style.left = event.clientX + 'px';
    contextMenu.style.display = 'block';
  },
},

在上面的代码中，我们获取到组件的 DOM 元素，并在其上绑定了 `contextmenu` 事件监听器，监听右键事件。然后在 `handleContextMenu` 方法中，我们阻止了右键菜单的默认弹出，并获取了右键菜单的 DOM 元素，并设置其 `top` 和 `left` 样式来定位菜单的位置，并将其 `display` 样式设置为 `block` 来显示菜单。

3. 在右键菜单组件（可以是 `el-dropdown`）上添加 `ref` 引用，方便后续操作：

<template>
  <div ref="contextMenu" style="display: none;">
    <el-dropdown>
      <span class="el-dropdown-link">右键菜单</span>
      <el-dropdown-menu>
        <el-dropdown-item>菜单项一</el-dropdown-item>
        <el-dropdown-item>菜单项二</el-dropdown-item>
        <el-dropdown-item>菜单项三</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

在上面的代码中，我们给右键菜单的最外层包裹了一个 `div` 元素，并在其上添加了 `ref` 引用，方便后续操作。然后在 `el-dropdown` 组件上定义了菜单项。

4. 在组件销毁时解绑 `contextmenu` 事件监听器：

beforeDestroy() {
  const el = this.$el;
  el.removeEventListener('contextmenu', this.handleContextMenu);
},

在上面的代码中，我们在组件销毁前解绑了 `contextmenu` 事件监听器，以免出现内存泄漏等问题。

这样，我们就可以给 ElementUI 的组件添加右键菜单了。