Vue右键菜单
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右键菜单的更多相关文章
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- vue+element树形结构右键菜单
环境:vue-admin-template vue 2.6.10 element-ui 2.7.0 1.自定义组件,文件位置:src/components/mentContext <temp ...
- 基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】
1.概述 开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预 ...
- vue2.0的contextmenu右键菜单
1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...
- 验证实现element-ui树形控件的自定义图标及右键菜单
许久不用,element-ui已经更新至2.4.1版本.直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装.由于element-ui的官方文档中介绍比较粗略,试了许 ...
- v-contextmenu的使用(右键菜单)
先来个自己改写的图: 代码: 结构:<div class="wrap" v-contextmenu:contextmenu> <v-contextmenu ref ...
- element 右键菜单
右键菜单 这是一个右键菜单的组件 <template> <div id="dropMenu" :style="style" style=&qu ...
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
随机推荐
- 【RS】BPR:Bayesian Personalized Ranking from Implicit Feedback - BPR:利用隐反馈的贝叶斯个性化排序
[论文标题]BPR:Bayesian Personalized Ranking from Implicit Feedback (2012,Published by ACM Press) [论文作者]S ...
- 树莓派进阶之路 (009) - 树莓派ftp脚本(原创)
FTP.sh #!/bin/sh cd echo "彻底卸载原有的ftp" sudo apt-get remove --purge vsftpd #(--purge 选项表示彻底删 ...
- POJ 1862 Stripies (哈夫曼树)
Stripies Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10263 Accepted: 4971 Descrip ...
- spark运行模式
一.Spark运行模式 Spark有以下四种运行模式: local:本地单进程模式,用于本地开发测试Spark代码; standalone:分布式集群模式,Master-Worker架构,Master ...
- Innodb后台线程
1.maste thread 负责将缓冲池中的数据异步刷新到磁盘,保证数据的一致性. 2.IO Thread负责IO请求的回调处理.1.0版本之前有4个IO Thread,负责write.read.i ...
- cucumber_java从入门到精通(5)使用maven创建cucumber_java项目
cucumber java从入门到精通(5)使用maven创建cucumber java项目 前几节我们已经在感性上认识了cucumber的基本功能以及BDD测试的基本流程,我们渐进重构,一步一步的向 ...
- 让MySQL在美国标准下运行
[美国标准下运行的MySQL会有哪方面的调整] 我不得不说,这里有点标题党了:事实上我想说的就是--ansi模式下启动mysqld进行,但是这个ansi我没有找到更好的译文,就给译成了“美国标准”了. ...
- 小程序踩过的一个小坑---解析二维码decodeURIComponent() url解码
因为我们需要用户扫码进入小程序,每一个货柜都有一个对应的二维码,当然每个二维码里的信息也不一样.用户扫码进入小程序之后,二维码的信息会以参数q带进去,而我们只能在onLoad事件中拿到这个参数, 但是 ...
- 网站启用SSL后重启Nginx提示 Enter PEM Pass Phrase:需要输入密码
最近在玩 STARTSSL 感觉个人站点使用这个SSL差不多也够用了.真正商用的SSL当然也可以自行购买. 我个人是为了防止数据中间被抓走,所以用了startssl 也基本就够用了. 转回正题,st ...
- Talend open studio如何调试代码
Talend将设计的模型直接生成了java代码,可以直接对模型生成的java代码进行调试,排查问题比kettle灵活很多, 设计的模型如下: 生成的代码如下: 点击 Java Debug进入调试模式, ...