rightShow(item) {
this.isPersoncontextMenus = true;
let menu = document.getElementById("msgRightMenu");
var e = e || window.event;
var marginWidths = 332;
var marginHeight = 55;
//鼠标点的坐标
var oX = e.clientX - marginWidths;
var oY = e.clientY - marginHeight;
if(oX>423){
oX = 423;
}
//菜单出现后的位置
menu.style.display = "block";
menu.style.left = oX + "px";
menu.style.top = oY + "px";
//阻止浏览器默认事件
return false;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件

Vue右键菜单的更多相关文章

  1. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  2. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  3. vue+element树形结构右键菜单

    环境:vue-admin-template   vue 2.6.10 element-ui 2.7.0 1.自定义组件,文件位置:src/components/mentContext <temp ...

  4. 基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】

    1.概述 开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预 ...

  5. vue2.0的contextmenu右键菜单

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  6. 验证实现element-ui树形控件的自定义图标及右键菜单

    许久不用,element-ui已经更新至2.4.1版本.直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装.由于element-ui的官方文档中介绍比较粗略,试了许 ...

  7. v-contextmenu的使用(右键菜单)

    先来个自己改写的图: 代码: 结构:<div class="wrap" v-contextmenu:contextmenu> <v-contextmenu ref ...

  8. element 右键菜单

    右键菜单 这是一个右键菜单的组件 <template> <div id="dropMenu" :style="style" style=&qu ...

  9. ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

随机推荐

  1. App 开发步骤

    在 iOS 开发中,写一个 App 很容易,但是要写好一个 App,确是要下另一番功夫.首先,我们来看一个 App 的开发要求: 写一个 App,显示出 Spotify 上 Lady Gaga 相关的 ...

  2. 【LeetCode】214. Shortest Palindrome

    Shortest Palindrome Given a string S, you are allowed to convert it to a palindrome by adding charac ...

  3. 路由器下CLI界面

    CLI(command-line interface,命令行界面)是指可在用户提示符下键入可执行指令的界面. CLI是Command Line Interface的缩写,即命令行界面.CLI界面是所有 ...

  4. Unix awk使用手册

    什么是awk? 你可能对UNIX比较熟悉,但你可能对awk很陌生,这一点也不奇怪,的确,与其优秀的功能相比,awk还远没达到它应有的知名度.awk是什么?与其它大多数UNIX命令不同的是,从名字上看, ...

  5. Nginx 在ubuntu14.04下的安装

    来源:http://blog.csdn.net/hanshileiai/article/details/45580001 按照步骤一步一步来,绝对ok 1.如果出现错误: *4 connect() t ...

  6. 【java】java开发中的23种设计模式详解

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  7. java 高性能读模式(译)

    原文地址:http://tutorials.jenkov.com/java-performance/read-patterns.html 好久没翻译了,逛知乎,无意间发现的一个链接,写的太好了,而且内 ...

  8. 巧用linux服务器的/dev/shm/

    巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度. 首先让我们认识一下,什么是tmpfs和/dev/shm/? tmpfs是Linux/Unix系统上的 ...

  9. Kafka不只是个消息系统

    作者丨 Jay Kreps Confluent 联合创始人兼 CEO Jay Kreps 发表了一篇博文,给出了 Kafka 的真正定位——它不只是个消息系统,它还是个存储系统,而它的终极目标是要让流 ...

  10. Nginx错误提示:504 Gateway Time-out解决方法

    朋友说504 Gateway Time-out的错误提示与nginx本身是没有任何关系的我们可以通过fastcgi配置参数的调整进行解 决. 修改 php-fpm 配置文件: 1.把 max_chil ...