服务器之家

服务器之家 > 正文

vue中如何自定义右键菜单详解

时间:2021-12-07 16:41     来源/作者:她的开呀

在所编辑的页面,需要添加右键菜单的元素,绑定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

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部