个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
24
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue中如何自定义右键菜单详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下:
|
1
2
3
4
5
6
7
|
<
li
v-for
=
"item in resourceList"
:key
=
"item.id"
@
click
=
"handleClickFolder(item)"
@
contextmenu.prevent
=
"openMenu($event,item)"
>
</
li
>
|
在页面编写右键菜单内容
|
1
2
3
4
5
6
7
8
|
<
ul
v-show
=
"visible"
:style
=
"{left:left+'px',top:top+'px'}"
class
=
"contextmenu"
>
<!-- <li v-if="rightClickItem.fileType==99" @click="handleClickFolder(rightClickItem)">打开</li>
<li @click="handleDelete(rightClickItem)">删除</li>
<li @click="handleDownloadFile(rightClickItem)" v-if="rightClickItem.fileType!=99">下载</li>
<li @click="handlePreviewFile(rightClickItem)" v-if="rightClickItem.fileType!=99">预览</li>
<li @click="handleUpdate(rightClickItem)">编辑</li> -->
<
li
>内容</
li
>
</
ul
>
|
在data()中定义需要的变量属性 。
|
1
2
3
4
5
6
7
|
data() {
return
{
visible:
false
,
top: 0,
left: 0
}
}
|
观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法 。
|
1
2
3
4
5
6
7
8
9
|
watch: {
visible(value) {
if
(value) {
document.body.addEventListener(
'click'
,
this
.closeMenu)
}
else
{
document.body.removeEventListener(
'click'
,
this
.closeMenu)
}
}
}
|
在method中定义打开右键菜单和关闭右键菜单的两个方法 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
openMenu(e, item) {
this
.rightClickItem = item;
let x = e.clientX;
let y = e.clientY;
this
.top = y;
this
.left = x;
this
.visible =
true
;
},
closeMenu() {
this
.visible =
false
;
}
|
在style中写右键菜单的样式 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.contextmenu {
margin
:
0
;
background
:
#fff
;
z-index
:
3000
;
position
:
fixed
;
list-style-type
:
none
;
padding
:
5px
0
;
border-radius:
4px
;
font-size
:
12px
;
font-weight
:
400
;
color
:
#333
;
box-shadow:
2px
2px
3px
0
rgba(
0
,
0
,
0
,
0.3
);
}
.contextmenu li {
margin
:
0
;
padding
:
7px
16px
;
cursor
:
pointer
;
}
.contextmenu li:hover {
background-color
:
rgb
(
3
,
125
,
243
);;
color
:
white
;
}
|
参考文档地址 。
到此这篇关于vue中如何自定义右键菜单详解的文章就介绍到这了,更多相关vue自定义右键菜单内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://www.cnblogs.com/yloved/p/13518231.html 。
最后此篇关于vue中如何自定义右键菜单详解的文章就讲到这里了,如果你想了解更多关于vue中如何自定义右键菜单详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
24
4
0
全称“Java Virtual Machine statistics monitoring tool”（statistics 统计；monitoring 监控；tool 工具） 用于监控虚拟机的各种运
主要是讲下Mongodb的索引的查看、创建、删除、类型说明，还有就是Explain执行计划的解释说明。 可以转载，但请注明出处。
1>单线程或者单进程 相当于短链接，当accept之后，就开始数据的接收和数据的发送，不接受新的连接，即一个server，一个client 不存在并发。 2>循环服务器和并发服务器
详解 linux中的关机和重启命令 一 shutdown命令 shutdown [选项] 时间 选项： ?
首先，将json串转为一个JObject对象： ? 1
matplotlib官网 matplotlib库默认英文字体 添加黑体（‘SimHei'）为绘图字体 代码： plt.rcParams['font.sans-serif']=['SimHei'
在并发编程中，synchronized关键字是常出现的角色。之前我们都称呼synchronized关键字为重量锁，但是在jdk1.6中对synchronized进行了优化，引入了偏向锁、轻量锁。本篇
一般我们的项目中会使用1到2个数据库连接配置，同程艺龙的数据库连接配置被收拢到统一的配置中心，由DBA统一配置和维护，业务方通过某个字符串配置拿到的是Connection对象。
实例如下： ? 1
1. MemoryCahe NetCore中的缓存和System.Runtime.Caching很相似，但是在功能上做了增强，缓存的key支持object类型；提供了泛型支持；可以读缓存和单个缓存
argument是javascript中函数的一个特殊参数，例如下文，利用argument访问函数参数，判断函数是否执行 复制代码 代码如下: <script
一不小心装了一个Redis服务，开了一个全网的默认端口，一开始以为这台服务器没有公网ip，结果发现之后悔之莫及啊 某天发现cpu load高的出奇，发现一个minerd进程 占了大量cpu，googl
今天写这个是为了 提醒自己 编程过程 不仅要有逻辑 思想 还有要规范 代码 这样可读性 1、PHP 编程规范与编码习惯最主要的有以下几点： 1 文件说明 2 funct
摘要：虚拟机安装时一般都采用最小化安装，默认没有lspci工具。一台测试虚拟网卡性能的虚拟机，需要lspci工具来查看网卡的类型。本文描述了在一个虚拟机中安装lspci工具的具体步骤。 由于要测试
1、修改用户进程可打开文件数限制 在Linux平台上，无论编写客户端程序还是服务端程序，在进行高并发TCP连接处理时，最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统
目录 算术运算符 基本四则运算符 增量赋值运算符 自增/自减运算符 关系运算符 逻
如下所示： ? 1
MapperScannerConfigurer之sqlSessionFactory注入方式讲解 首先，Mybatis中的有一段配置非常方便，省去我们去写DaoImpl（Dao层实现类）的时间，这个
Linux的网络虚拟化是LXC项目中的一个子项目，LXC包括文件系统虚拟化，进程空间虚拟化，用户虚拟化，网络虚拟化，等等，这里使用LXC的网络虚拟化来模拟多个网络环境。 本文从基本的网络设备讲
? 1
我是一名优秀的程序员,十分优秀！