原生Vue 实现右键菜单组件功能

下面是详细的“原生Vue 实现右键菜单组件功能”的攻略：

1. 准备工作

要实现右键菜单组件，我们首先要准备好 Vue 以及相关依赖包，这里我以安装 Vue 3.x 版本为例。

在控制台运行以下命令：

npm install vue@next

另外，我们需要使用 popper.js 依赖库来实现菜单的弹出和定位，通过以下命令安装：

npm install @popperjs/core

2. 创建右键菜单组件

接下来，我们可以创建一个名为 ContextMenu.vue 的 Vue 单文件组件，并在其中编写右键菜单的 HTML 结构和样式。以下是一个简单的示例：

<template>
  <div class="context-menu" :style="{ top: position.top + 'px', left: position.left + 'px' }">
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="item.action">{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue';
import { createPopper } from '@popperjs/core';

export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    position: {
      type: Object,
      default: () => ({ top: 0, left: 0 }),
    },
  },
  setup(props) {
    const reference = ref(null);
    const popper = ref(null);

    onMounted(() => {
      popper.value = createPopper(reference.value, props.position, {
        placement: 'right-start',
      });
    });

    onUnmounted(() => {
      popper.value.destroy();
      popper.value = null;
    });

    return {
      reference,
      popper,
    };
  },
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  z-index: 999;
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.context-menu li {
  padding: 8px 12px;
  cursor: pointer;
}
.context-menu li:hover {
  background: #f2f2f2;
}
</style>

在这个示例中，我们使用了 Popper.js 实现了菜单的定位和弹出，同时在 props 中接收菜单项数据 items 和菜单位置信息 position，并根据数据动态生成菜单项的内容。

3. 在页面中使用右键菜单组件

实现菜单组件之后，我们需要在业务页面中使用该组件。以下是一个简单的示例：

<template>
  <div @contextmenu.prevent="showContextMenu" @click="hideContextMenu">
    <p>
      右键点击此处
    </p>
    <ContextMenu v-if="isContextMenuVisible" :position="contextMenuPosition" :items="contextMenuItems" />
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue';

export default {
  components: {
    ContextMenu,
  },
  data() {
    return {
      isContextMenuVisible: false,
      contextMenuPosition: { top: 0, left: 0 },
      contextMenuItems: [
        {
          label: '菜单项1',
          action: () => {
            console.log('点击了菜单项1');
          },
        },
        {
          label: '菜单项2',
          action: () => {
            console.log('点击了菜单项2');
          },
        },
      ],
    };
  },
  methods: {
    showContextMenu(e) {
      this.isContextMenuVisible = true;
      this.contextMenuPosition = { top: e.clientY, left: e.clientX };
    },
    hideContextMenu() {
      this.isContextMenuVisible = false;
    },
  },
};
</script>

在这个示例中，我们在父组件的根元素上绑定了 contextmenu 事件，并传入了一个预设方法 showContextMenu，使右键点击事件被触发时，动态计算菜单位置和菜单项数据，并将变量 isContextMenuVisible 设置为 true，从而显示菜单。同时，在 click 事件中调用 hideContextMenu 方法，以隐藏菜单。

我们在页面中使用创建的 ContextMenu 组件，并传入菜单项数据 contextMenuItems 和位置信息 contextMenuPosition，这些信息都是在 showContextMenu 方法中动态计算得到的。

4. 添加菜单项动态更新的示例

接下来我们添加一个菜单项动态更新的示例，当菜单项数据发生变化时，菜单项应该自动更新。

我们可以在父组件中添加一个 data 属性 menuItemsUpdated，并在 mounted 生命钩子中创建一个定时器，每隔一段时间更新菜单项数据：

<template>
  <div @contextmenu.prevent="showContextMenu" @click="hideContextMenu">
    <p>
      右键点击此处
    </p>
    <ContextMenu v-if="isContextMenuVisible" :position="contextMenuPosition" :items="contextMenuItems" />
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue';

export default {
  components: {
    ContextMenu,
  },
  data() {
    return {
      isContextMenuVisible: false,
      contextMenuPosition: { top: 0, left: 0 },
      contextMenuItems: [
        {
          label: '菜单项1',
          action: () => {
            console.log('点击了菜单项1');
          },
        },
        {
          label: '菜单项2',
          action: () => {
            console.log('点击了菜单项2');
          },
        },
      ],
      menuItemsUpdated: false,
    };
  },
  mounted() {
    setInterval(() => {
      const newItems = [
        {
          label: '菜单项1（已更新）',
          action: () => {
            console.log('点击了菜单项1（已更新）');
          },
        },
        {
          label: '菜单项2（已更新）',
          action: () => {
            console.log('点击了菜单项2（已更新）');
          },
        },
      ];
      this.contextMenuItems = newItems;
      this.menuItemsUpdated = !this.menuItemsUpdated;
    }, 5000);
  },
  methods: {
    showContextMenu(e) {
      this.isContextMenuVisible = true;
      this.contextMenuPosition = { top: e.clientY, left: e.clientX };
    },
    hideContextMenu() {
      this.isContextMenuVisible = false;
    },
  },
};
</script>

这个示例中，我们使用 setInterval 创建了一个定时器，在每次定时器回调中重新设置菜单项数据，并且每次 data 中的 menuItemsUpdated 属性值都会改变，这样就能触发组件的重新渲染和列表的更新。

注意：由于使用了 data 中的属性修改触发更新的方式，因此 contextMenuItems 的初始化应该使用函数的方式，即 default: () => []。

总结

以上就是实现右键菜单组件的完整攻略，包含组件的创建、样式与事件的处理，以及在页面中的应用和菜单项动态更新的示例。通过实现上述内容，我们可以轻松实现自定义的右键菜单功能。

阅读剩余 80%