Vue自定义指令实现点击右键弹出菜单示例详解

2024-08-01 14:51:48

一、实现思路

1.使用contextmenu事件

该需求需要拦截浏览器的右击事件，更改为自定义监听事件，可使用@contextmenu.prevent直接绑定一个监听函数，它的作用就是拦截右击事件并触发绑定的监听事件。

其次，为了在右击的位置打开菜单，我们需要获取鼠标点击的位置；一般来说，若绑定的函数没有自定义参数，则可以直接使用默认的参数e来获取；若绑定的函数具有自定义参数，则需要定义$event来获取位置，即

@contextmenu.prevent="rightclick(index, indexMeasure, $event)

最后，通过参数event可获取鼠标点击的横向X轴值和竖直Y轴值，然后使用固定定位来对菜单进行偏移，因为固定定位是相对于浏览器窗口，且获取的X和Y轴值也是相对于浏览器窗口的。

  #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }

2.点击菜单之外的任意地方关闭菜单

在mounted里边监听全局的点击事件即可

mounted () {
    // 鼠标点击其他位置时隐藏菜单
    document.onclick = function () {
      menu.style.display = 'none';
    }
}

3.菜单置于图层的最顶层

该需求是为了避免在点击菜单项时，触发了其他元素绑定的监听函数。这其实跟图层有关，我们只需要将菜单置到顶层即可。使用的是z-index属性,如下

  #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }

二、源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用Vue自定义指令实现右键菜单</title>
  <script src="js/vue.js"></script>
  <style>
    /* 自定义右键菜单 */
    #menu {
      z-index: 999;
      display: none;
      position: fixed;
      width: 150px;
      border: 1px solid #ccc;
      background: #eee;
    }
    #menu ul {
      margin: 5px 0;
    }
    #menu li {
      height: 30px;
      line-height: 30px;
      color: #21232E;
      font-size: 12px;
      text-align: center;
      cursor: default;
      list-style-type: none;
      border-bottom: 1px dashed #cecece;
    }
    #menu li:hover {
      background-color: #cccccc;
    }
    .block {
      height: 300px;
      width: 400px;
      background-color: pink;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div id="itany">
    <div style="position: relative;">
      <div class="block" v-rightclick>1</div>
      <div class="block" v-rightclick>2</div>
      <div class="block" v-rightclick>3</div>
      <div class="block" v-rightclick>4</div>
      <div class="block" v-rightclick>5</div>
      <div class="block" v-rightclick>6</div>
      <!-- 自定义鼠标右键菜单 -->
      <div id="menu">
        <ul>
          <li v-for="item in rightMenuList" @click="item.handler">
            {{item.text}}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    Vue.directive('rightclick', function (el, binding) {
      el.oncontextmenu = function (e) {
        console.log('e.clientY', e.clientY)
        // console.log('e.clientX', e.clientX)
        e.preventDefault();
        menu.style.display = 'block';
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
      }
    });
    var vm = new Vue({
      el: '#itany',
      data: {
        rightMenuList: [
          {
            id: 0,
            text: "开通道",
            handler: () => {
              alert('通道开启成功');
            }
          },
          {
            id: 1,
            text: "关通道",
            handler: () => {
              alert('通道关闭成功');
            }
          },
          {
            id: 2,
            text: "重启通道",
            handler: () => {
              alert('通道重启成功');
            }
          },
        ]
      },
      methods: {
      },
      mounted () {
        // 鼠标点击其他位置时隐藏菜单
        document.onclick = function () {
          menu.style.display = 'none';
        }
      }
    });
  </script>
</body>
</html>

以上就是Vue自定义指令实现点击右键弹出菜单示例详解的详细内容，更多关于Vue自定义指令右键弹出菜单的资料请关注我们其它相关文章！

vue如何通过点击事件弹出弹窗页面详解

目录步骤一步骤二总结步骤一创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template>   <el-dialog title="弹窗" :visible.syn
javascript自定义右键弹出菜单实现方法

本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum
vue实现右键弹出菜单

在最近工作中,有一个需求,需要做一个表格,并且对该表格右键弹出菜单支持增删改,这里做下总结,功能截图如下: 首先定义菜单结构  <div class="menu-list" :style="{position:'fixed',top:top+'px',left:left+'px'}" v-if="visible"> <div class="menu" v-for=&q
vue2.0的contextmenu右键弹出菜单的实例代码

整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>
Android实现类似于PC中的右键弹出菜单效果

Android系统中的ContextMenu(上下文菜单)类似于PC中的右键弹出菜单,当一个视图注册到一个上下文菜单时,执行一个在该对象上的"长按"动作,将出现一个提供相关功能的浮动菜单.上下文菜单可以被注册到任何视图对象中,不过,最常见的是用于列表视图ListView的item,在按中列表项时,会转换其背景色而提示将呈现上下文菜单. 注意:上下文菜单不支持图标和快捷键. 为了创建一个上下文菜单,你必须重写这个活动的上下文菜单回调函数:onCreateContextMenu() 和
MFC创建右键弹出菜单的方法

本文实例讲述了MFC创建右键弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: ①.添加一个菜单资源,ID为IDM_RIGHTMENU.因为在显示右键菜单时顶级菜单是不显示的,所以可以给它设置任意文本. ②.给视类添加WM_RBUTTONDOWN消息,在该消息中处理右键弹出菜单.因为视类窗口始终覆盖在框架窗口之上,框架窗口接收不到鼠标消息,所以由视类捕获WM_RBUTTONDOWN消息. 复制代码代码如下: void CMenuView::OnRButtonDown(UINT nFlag
Js+DVML很酷漂亮实用的右键弹出菜单

Js+DVML:很酷实用的右键弹出菜单 v\:*{behavior:url(#default#VML);} .menulist{position:static;PADDING-TOP:6;LETTER-SPACING:8;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2} //作者:风云舞 var menutime1=null,showobjs1=null //menutime1=循环计时器调用变量,showobjs1=绑定菜单,定时器过程执行时调用 fu
vue+three.js实现炫酷的3D登陆页面示例详解

目录前言: Three.js的基础知识关于场景关于光源关于相机(重要) 关于渲染器完善效果创建一个左上角的地球使地球自转创建星星使星星运动创建云以及运动轨迹使云运动完成three.js有关效果结语前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识想象一下,在一个虚拟的3D世界中都需要什
Android自定义PopWindow实现QQ、微信弹出菜单效果

前段时间在个人开发的项目中需要用到弹出菜单,类似QQ右上角的弹出菜单,自己使用popwin的次数也不是很多,其中也遇到过一点问题,今天正好有时间就把一些经验分享给大家. 先来看看最终实现过后的效果怎么样,下面放上图自定义的弹出菜单是继承的popwin,并不是view 因为没有必要重复造车轮,如果想要实现某种特殊的效果另说.首先创建类MyPopWindow继承Popwindow. public class MyPopWindow extends PopupWindow implements Vi
vue中Axios的封装和API接口的管理示例详解

目录一.axios的封装安装引入环境的切换设置请求超时 post请求头的设置请求拦截响应的拦截封装get方法和post方法 axios的封装基本就完成了,下面再简单说下api的统一管理. 2018.8.14更新我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js