v-contextmenujs 右键菜单点击
忙碌了一晚上的“枫师傅”用上了新插件v-contextmenujs,这个插件就按照他的文档来就行
我的使用:
<!-- 这里是demo.vue,之所以选择html是为了代码高亮 -->
<el-table-column label="操作" width="100" align="center" header-align="center">
<template slot-scope="rows">
<div class="menu" @contextmenu.prevent="onContextmenu($event,rows.row.name)" :pid="rows.row.id" :pname="rows.row.name">
<p class="menu-text">操作 <i class="el-icon-d-arrow-right"></i></p>
</div>
</template>
</el-table-column>
<script>
export default {
methods: {
onContextmenu (event, id) {
event.preventDefault()
this.$contextmenu({
items: [
{
label: '详情',
children: [
{
label: '当前页打开'
},
{
label: '新窗口打开'
}
]
},
{
label: '更新',
onclick: async () => {
}
},
{
label: '删除',
onclick: async () => {
}
}
],
event,
// x: event.clientX,
// y: event.clientY,
customClass: 'class-a',
zIndex: 3,
minWidth: 100
})
return false
},
handleScroll () {
// 销毁菜单
this.$contextmenu.destroy()
}
},
mounted () {
document.addEventListener('DOMMouseScroll', () => {
this.handleScroll()
}, false)
}
}
笔记:
- 使用.stop可以阻止事件冒泡
例如:<div class="common-box">
<div class="a" @contextmenu.prevent="onContextmenua($event,1)">
<div class="b" @contextmenu.prevent.stop="onContextmenub($event,2)"></div>
</div>
</div>
v-contextmenujs 右键菜单点击的更多相关文章
- jQuery 侧栏菜单点击body消失
其实就在弹出菜单时 让菜单外部有个全屏大小的遮罩层
- java cef3 禁止右键菜单项
如下图所示,在context_menu_handler.cpp中ContextMenuHandler::OnBeforeContextMenu添加以下代码即可: ){ model->Clear( ...
- Maven问题总结:Eclipse中项目右键菜单中点击Maven->Update Projects时JDK被重置
Eclipse中在项目右键菜单点击->Maven->Update Projects时,JDK总是切回 1.5 如果没有在Maven中配置过JDK版本,只是在Eclipse中项目的Prope ...
- 将Sublime Text3添加到右键菜单中
卸载了Sublime Text2,安装了最新版本的Sublime Text3,不过一直不在右键菜单中,每次使用都需要从打开方式中选,所以决定添加,有如下2种方法. 添加到右键菜单 方法一(推荐) 在S ...
- Win7删除右键菜单中“图形属性”和“图形选项”
完win7操作系统后,打完驱动在桌面右键会出现如下两个选项,平时没啥用又占用空间,那么如何删掉这两个选项呢? 操作步骤: 1.在运行中输入 regedit 确定打开注册表: 2.依次单击展开HKEY_ ...
- SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error
SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...
- 为 APK 文件增加右键菜单组实现快捷安装
0.结果 1.需求 迫于每次都要打开 Powershell 手动敲 adb install xxx.apk 太麻烦,就想通过注册表搞一个右键菜单,实现快捷安装 apk 的功能. 最后决定先实现三个功能 ...
- IE浏览器右键菜单插件开发(上篇)——自定义一个IE右键菜单项
要做一个IE右键浏览器插件,得3步走. 第一,在IE右键菜单上添加自定义菜单名称,是通过注册表实现的,如下: string regkey = @"Software\Microsoft\Int ...
- JCEF 如何修改右键菜单项(JCEF在右键菜单中添加开发者选项-show dev tools)
需求: 在界面的右键事件中添加一个打开开发者选项的菜单(Show Dev Tools) 所以我们可以看到的是在界面上右键,会有默认的一些菜单项(前进,后退,打印,查看源码),而这些功能并不一定是我们需 ...
随机推荐
- Ansible Playbook概览
Ansible playbook 执行需要三步路执行: 1.编写playbook 2.定义主机清单文件 3.设置运行环境,写入配置文件 1.编写playbook Playbook使用YAML语法格式进 ...
- freeswitch拨打分机号源代码跟踪
概述 freeswitch是一款非常好用的开源VOIP软交换平台. 之前我们有介绍过使用fs拨打分机号的方法,其中代码流程是比较复杂的,所以单独开一章介绍. fs拨打分机号,是使用send_dtmf接 ...
- 【docker专栏5】详解docker镜像管理命令
一.国内Docker镜像仓库 由于大家都知道的原因,从国外的docker 仓库中pull镜像的下载速度实际上是很慢的.国内的一些一线厂商以及docker官方都在国内免费提供了一些docker镜像仓库, ...
- day02 IO
JAVA IO java io可以让我们用标准的读写操作来完成对不同设备的读写数据工作. java将IO按照方向划分为输入与输出,参照点是我们写的程序. 输入:用来读取数据的,是从外界到程序的方向,用 ...
- Odoo14 js 怎么获取图片url链接
上内部代码: 1 _getImageURL: function (model, field, id, placeholder) { 2 id = (_.isArray(id) ? id[0] : id ...
- 第三讲 Linux测试
3.1 Linux操作系统定义 Ø我们为什么要学习这个linux系统呢? 那是因为我们很多的服务都放在这个linux系统,那为什么很多服务都要放到这个linux系统?这是因为linux系统好,它系统稳 ...
- Educational Codeforces Round 132 (Rated for Div. 2)
Educational Codeforces Round 132 (Rated for Div. 2) A. Three Doors 简述 题意: 有三扇门(1~3), 其中两扇门后面有对应标号门的钥 ...
- Ray类定义
定义光线,书中已经有原理. 类声明: #ifndef __RAY_HEADER__ #define __RAY_HEADER__ #include "geometry.h" cla ...
- MySQL更新锁表超时 Lock wait timeout exceeded
背景 最近在做一个订单的钉钉审批功能,钉钉审批通过之后,订单更新审核状态,然后添加一条付款,并且更新付款状态: // 订单审批通过 @Transactional(rollbackFor = Excep ...
- Dart 异步编程(一):初步认识
由于 Dart 是单线程编程语言,对于进行网络请求和I/O操作,线程将发生阻塞,严重影响依赖于此任务的下一步操作. 通常,在一个阻塞任务之后还有许许多多的任务等待被执行.下一步任务需要上一步任务的结果 ...