Vue3 实现右击弹出操作选项

这篇具有很好参考价值的文章主要介绍了Vue3 实现右击弹出操作选项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过自定义指令来实现右击弹出操作选项的功能。文章来源地址https://www.toymoban.com/news/detail-839498.html

  1. 创建一个自定义指令 v-context-menu.js:
// 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应用中注册这个自定义指令:
// 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. 在组件中使用这个指令:
<template>
  <div v-context-menu="menuOptions">
    <!-- 右击这个区域会弹出菜单 -->
    右击我
  </div>
</template>

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

const menuOptions = ref([
  {
    label: '选项一',
    action: () => alert('选项一被点击'),
  },
  {
    label: '选项二',
    action: () => alert('选项二被点击'),
  },
]);
</script>

到了这里,关于Vue3 实现右击弹出操作选项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3自定义指令实现超出显示省略号,鼠标浮入弹出title,显示全部文本

    mounted 和 updated 是 Vue 生命周期钩子函数,分别表示 指令挂载到元素 和 指令所在组件更新时触发 。 el : HTMLElement 和 binding : DirectiveBinding 是方法参数, el 表示指令作用的元素, binding 包含指令的绑定值、参数和修饰符等信息。 el.offsetWidth 获取的是元素在渲染时所占据的整体

    2024年02月01日
    浏览(47)
  • Vue3弹出确认(Popconfirm)

    参数 说明 类型 默认值 必传 title 确认框的标题 string | slot ‘’ false description 确认框的内容描述 string | slot ‘’ false content 展示的文本 string | slot ‘’ false icon 自定义弹出确认框 Icon 图标 string | slot ‘’ false iconType 弹出确认框 Icon 图标类型 ‘success’ | ‘info’ | ‘warn’ | ‘

    2024年02月13日
    浏览(37)
  • 【vue+ElementUI】实现web端鼠标右击打开菜单

    最近做的开源项目有个需求就是在 ElementUI 的 NavMenu 侧边栏中,实现鼠标右击打开菜单功能,今天实现了一下,做个记录。 鼠标右击打开菜单 在鼠标右击的位置打开菜单 点击菜单项即可关闭菜单 点击菜单外关闭菜单 菜单置于图层的最顶层 菜单动态样式 2.1.在鼠标右击的位置

    2024年02月09日
    浏览(51)
  • Vue3 select循环多个,选项option不能重复被选

    环境 :vue3+ts+vite+element plus 实现目标 :Vue3 select循环多个,当其中一个option值被选后,其他select里面不能再重复选择该option值。第二种,当其中一个option值被选后,其他select里面就不出现被选option的值 第一种 :代码如下 效果: 第二种: 效果: 或者用script setup的写法 如果没

    2024年02月10日
    浏览(35)
  • [Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能

    第一章 定制上中下(顶部菜单、底部区域、中间主区域显示)三层结构首页 第二章 使用Vue3、Element-plus菜单组件构建菜单 第三章 使用Vue3、Element-plus走马灯组件构建轮播图 第四章 使用Vue3、Element-plus tabs组件构建选项卡功能 [第五章 使用Vue3、Element-plus菜单组件构建组图文章

    2024年02月09日
    浏览(69)
  • Vue3: 选项式API和组合式API的优缺点

    Vue框架提供了两种不同的API风格来编写组件,分别是 选项式API 和 组合式API 。 一.选项式API: 选项式API是vue2.x版本中默认使用的API风格,它是基 于对象的方式 来描述组件的行为和状态的。选项式API需要在Vue组件的选项对象中声明组件的属性和方法,如data、methods、computed、

    2024年02月09日
    浏览(47)
  • 【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作

    我们先来看一下效果展示 1、infiniteScroll无限滚动是一种在网页或应用程序中实现动态加载内容的技术,它允许用户在滚动页面时无需点击分页或刷新按钮自动加载更多内容,从而提供更流畅的用户体验,传统的分页加载需要用户点击下一页或下载更多的按钮来获取更多内容,

    2024年02月01日
    浏览(60)
  • vue3前端开发,感受一下组合式api和VUE2选项式的差异

    vue3前端开发,感受一下组合式api和VUE2选项式的差异!今天开始,正式开始,进入学习Vue3的内容。以后代码,案例分享,都会采用组合式api的模式为大家做展示。 今天是第一节,带大家感受一下,Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先,大家需要提前使用

    2024年01月19日
    浏览(38)
  • JavaScript编程实现tab选项卡切换的效果+1

    之前在“圳品”信息系统使用了tab选项卡来显示信息,详见: JavaScript编程实现tab选项卡切换的效果 在tab选项卡中使用其它div来显示信息就出现了问题,乱套了,比如下面的这段代码: 运行效果如下: 可以看到,第1张选项卡中的div id=\\\"div1\\\" class=\\\"blue\\\"选项卡1/div消失了,而第

    2024年02月03日
    浏览(49)
  • Vue3+Element Plus 关于Dialog弹出Form表单,使用resetFields重置无效的解决

    主要参考了element-plus官方的表单重置按钮(官方Form例子任意reset按钮),然后试了试他的ref绑定,发现可以完美解决重置问题。 第一步:给Form表单绑定ref。绑定ref 的值为refFormInstance();这里注意表单el-form-item必须有prop属性。 2.第二步:在你想要重置的地方调用重置表单方法

    2024年01月21日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包