Vue3 实现右击弹出操作选项

通过自定义指令来实现右击弹出操作选项的功能。

  1. 创建一个自定义指令 v-context-menu.js:
javascript 复制代码
// v-context-menu.js
import { DirectiveBinding } from 'vue';

const ContextMenu = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const menu = binding.value; // 获取传入的菜单数据
    if (!menu) return;

    el.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      // 创建一个菜单元素并添加到body
      const menuElement = document.createElement('div');
      menuElement.style.position = 'absolute';
      menuElement.style.left = `${mouseX}px`;
      menuElement.style.top = `${mouseY}px`;
      menuElement.style.backgroundColor = 'white';
      menuElement.style.zIndex = '1000';
      menuElement.style.border = '1px solid #ccc';

      // 构建菜单项
      menu.forEach((item) => {
        const menuItem = document.createElement('div');
        menuItem.textContent = item.label;
        menuItem.style.padding = '5px';
        menuItem.style.cursor = 'pointer';
        menuItem.addEventListener('click', item.action);
        menuElement.appendChild(menuItem);
      });

      document.body.appendChild(menuElement);
    });

    // 清理菜单元素
    el.addEventListener('click', () => {
      const menuElements = document.querySelectorAll('.context-menu');
      menuElements.forEach((menuElement) => {
        menuElement.remove();
      });
    });
  },
};

export default ContextMenu;
  1. 在Vue应用中注册这个自定义指令:
javascript 复制代码
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import ContextMenuDirective from './directives/v-context-menu';

const app = createApp(App);

app.directive('context-menu', ContextMenuDirective);

app.mount('#app');
  1. 在组件中使用这个指令:
html 复制代码
<template>
  <div v-context-menu="menuOptions">
    <!-- 右击这个区域会弹出菜单 -->
    右击我
  </div>
</template>

<script setup>
import { ref } from 'vue';

const menuOptions = ref([
  {
    label: '选项一',
    action: () => alert('选项一被点击'),
  },
  {
    label: '选项二',
    action: () => alert('选项二被点击'),
  },
]);
</script>
相关推荐
从零开始学习人工智能14 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin14 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城14 小时前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy14 小时前
html基本知识
前端·html
不要再敲了15 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
荣达15 小时前
koa洋葱模型理解
前端·后端·node.js
xiaoyan201515 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation16 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation16 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州16 小时前
JavaScript中的dispatchEvent方法详解
javascript