当前位置:网站首页>鼠标右键 自定义
鼠标右键 自定义
2022-07-06 18:02:00 【阿六啊】
1.在需要添加右键的页面,绑定contextmenu事件(阻止浏览器默认事件,添加自定义事件)
<xx组件 @contextmenu.prevent.native="openMenu($event)">
2.在页面编写右键菜单的内容
<ul
v-show="visible"
:style="contextmenuStyle"
class="contextmenu"
>
<li @click="setBack">
置于底层
</li>
<li @click="setTop">
置于顶层
</li>
</ul>
3.定义属性变量
private contextmenuStyle: any={
}
private visible=false;
4.创建监听事件,来触发关闭右键菜单的方法
@Watch('visible')
private visibleChange () {
if (this.visible) {
// 显示的时候 添加一个点击事件 用于隐藏右键的内容
window.addEventListener('click', this.closeMenu);
} else {
window.removeEventListener('click', this.closeMenu);
}
}
5.打开和关闭右键菜单的两个方法
// 鼠标右键
private async openMenu (e) {
this.contextmenuStyle = {
left: e.offsetX + 'px',
top: e.offsetY + 'px'
};
this.visible = true;
}
private setBack () {
this.drawer.sendToBack();
}
private setTop () {
this.drawer.setTop();
}
private closeMenu () {
this.visible = false;
}
6.样式
<style lang='scss' scoped>
@import '[email protected]/css/variable';
.contextmenu {
margin: 0;
background: #eeeded;
opacity: 0.9;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px;
border-radius: 4px;
font-size: 12px;
color: #505050;
border: 1px solid $color-border;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 2px 10px;
border-radius: 2px;
cursor: pointer;
}
.contextmenu li:hover {
background: $color-button-disabled-hover;
color: $color-basic;
}
</style>
边栏推荐
- [chip scheme design] pulse oximeter
- Make Jar, Not War
- LeetCode:1175. 质数排列
- 405 method not allowed appears when the third party jumps to the website
- [signal and system]
- Failed to successfully launch or connect to a child MSBuild. exe process. Verify that the MSBuild. exe
- C language instance_ three
- Wood extraction in Halcon
- Sword finger offer II 035 Minimum time difference - quick sort plus data conversion
- [advanced C language] 8 written questions of pointer
猜你喜欢
Asset security issues or constraints on the development of the encryption industry, risk control + compliance has become the key to breaking the platform
Comparison of picture beds of free white whoring
一起看看matlab工具箱内部是如何实现BP神经网络的
域分析工具BloodHound的使用说明
go-zero微服务实战系列(九、极致优化秒杀性能)
Js逆向——捅了【马蜂窝】的ob混淆与加速乐
微信公众号发送模板消息
C language - array
[case sharing] basic function configuration of network loop detection
2022 Google CTF SEGFAULT LABYRINTH wp
随机推荐
Implementation principle of waitgroup in golang
According to the analysis of the Internet industry in 2022, how to choose a suitable position?
增加 pdf 标题浮窗
域分析工具BloodHound的使用说明
Using the entry level of DVA in taro3.*
Taro中添加小程序 “lazyCodeLoading“: “requiredComponents“,
Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which
ZOJ Problem Set – 2563 Long Dominoes 【如压力dp】
安利一波C2工具
[chip scheme design] pulse oximeter
修改px4飞控的系统时间
Transplant DAC chip mcp4725 to nuc980
C语言实例_3
编译命令行终端 swift
[JS] obtain the N days before and after the current time or the n months before and after the current time (hour, minute, second, year, month, day)
Add the applet "lazycodeloading": "requiredcomponents" in taro,
Js逆向——捅了【马蜂窝】的ob混淆与加速乐
HMM 笔记
第三方跳转网站 出现 405 Method Not Allowed
Metauniverse urban legend 02: metaphor of the number one player