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. ubuntu安装过程中遇到问题小结

    一.下载 官网下载地址:https://www.ubuntu.com/download/desktop/contribute?version=16.04.4&architecture=amd6 ...

  2. 【AI】Computing Machinery and Intelligence - 计算机器与智能

    [论文标题] Computing Machinery and Intelligence (1950) [论文作者] A. M. Turing (Alan Mathison Turing) [论文链接] ...

  3. Fedora下安装deb包方法

    Linux系统提供一个软件alien, 使用它能够把deb包转换成各种格式. 1. 使用yum install alien 2. 安装完成后,执行 alien -r XXXXX.deb, 即可转换成对 ...

  4. ROS学习(五)—— 编译ROS Package

    提前准备: 记得事先source你的环境配置(setup)文件,在Ubuntu中的操作指令如下. source /opt/ros/kinetic/setup.bash 一.使用catkin_make ...

  5. React(0.13) hello world

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  7. openstack neutron 二/三层网络实现

    引用声明:https://zhangchenchen.github.io/2017/02/12/neutron-layer2-3-realization-discovry/ 一.概述 Neutron是 ...

  8. 日志收集之--将Kafka数据导入elasticsearch

    最近需要搭建一套日志监控平台,结合系统本身的特性总结一句话也就是:需要将Kafka中的数据导入到elasticsearch中.那么如何将Kafka中的数据导入到elasticsearch中去呢,总结起 ...

  9. 关于ps cs5的一些问题

    一.photoshop cs5 默认在窗口中浮动方法 1.打开“编辑>首选项>界面”在“面板和文档”里把“以选项卡方式打开图像”的勾选去掉 2.点击菜单栏“窗口>排列>使所有内 ...

  10. 安装和配置SharePoint 2013 Workflow

    SharePoint 2013中的工作流概述 在SharePoint 2013中,Workflow(建立在Windows Workflow Foundation 4.5)和WCF承载在Workflow ...