Vue 自定义右键菜单的究极指南

2024-01-13 08:46:49

前言

右键菜单是用户界面中一个常见的元素，它允许用户通过右键单击来访问各种命令和选项。在 Vue 中，我们可以使用一些库或框架来轻松地创建自定义右键菜单。在本文中，我们将介绍如何使用 Vue 来创建一个自定义右键菜单。

阻止默认右键菜单

在开始之前，我们需要阻止默认的右键菜单。这是因为默认的右键菜单会覆盖我们自定义的右键菜单。我们可以使用 Vue 的 @contextmenu 事件来阻止默认的右键菜单。例如：

<template>
  <div @contextmenu.prevent>
    <!-- 你的内容 -->
  </div>
</template>

获取当前右键点击时的 x/y 坐标及 ID

接下来，我们需要获取当前右键点击时的 x/y 坐标及 ID。我们可以使用 Vue 的 @contextmenu 事件来获取这些信息。例如：

<template>
  <div @contextmenu="onContextMenu">
    <!-- 你的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    onContextMenu(event) {
      console.log(event.clientX, event.clientY, event.target.id);
    }
  }
}
</script>

自定义右键菜单样式及内容

现在，我们可以自定义右键菜单的样式和内容了。我们可以使用 Vue 的 v-contextmenu 指令来创建自定义右键菜单。例如：

<template>
  <div @contextmenu.prevent>
    <ul v-contextmenu>
      <li>选项 1</li>
      <li>选项 2</li>
      <li>选项 3</li>
    </ul>
  </div>
</template>

<style>
ul[v-contextmenu] {
  position: absolute;
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
}

ul[v-contextmenu] li {
  cursor: pointer;
}

ul[v-contextmenu] li:hover {
  background-color: #eee;
}
</style>

定位在指定的位置后显示右键菜单

我们还可以定位在指定的位置后显示右键菜单。我们可以使用 Vue 的 v-contextmenu.show 指令来实现这一点。例如：

<template>
  <div @contextmenu.prevent>
    <ul v-contextmenu v-contextmenu.show="showContextMenu">
      <li>选项 1</li>
      <li>选项 2</li>
      <li>选项 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    showContextMenu(event) {
      this.$refs.contextmenu.show(event.clientX, event.clientY);
    }
  },
  refs: {
    contextmenu: {
      show(x, y) {
        this.$el.style.top = `${y}px`;
        this.$el.style.left = `${x}px`;
        this.$el.style.display = 'block';
      }
    }
  }
}
</script>

返回对应点击目录的事件（如：查看）

最后，我们可以返回对应点击目录的事件（如：查看）。我们可以使用 Vue 的 @click 事件来实现这一点。例如：

<template>
  <div @contextmenu.prevent>
    <ul v-contextmenu>
      <li @click="onViewClick">选项 1</li>
      <li @click="onEditClick">选项 2</li>
      <li @click="onDeleteClick">选项 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    onViewClick() {
      console.log('查看');
    },
    onEditClick() {
      console.log('编辑');
    },
    onDeleteClick() {
      console.log('删除');
    }
  }
}
</script>