当前位置:网站首页>Right mouse button customization
Right mouse button customization
2022-07-07 01:35:00 【Ah Liu】
1. Right click the page that needs to be added , binding contextmenu event ( Block browser default Events , Add custom events )
<xx Components @contextmenu.prevent.native="openMenu($event)">
2. Write the contents of the right-click menu on the page
<ul
v-show="visible"
:style="contextmenuStyle"
class="contextmenu"
>
<li @click="setBack">
On the ground floor
</li>
<li @click="setTop">
Put on top
</li>
</ul>
3. Define attribute variables
private contextmenuStyle: any={
}
private visible=false;
4. Create a listening event , To trigger the method of closing the right-click menu
@Watch('visible')
private visibleChange () {
if (this.visible) {
// On display Add a click event Used to hide the contents of the right key
window.addEventListener('click', this.closeMenu);
} else {
window.removeEventListener('click', this.closeMenu);
}
}
5. Two methods to open and close the right-click menu
// Right mouse button
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
<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>
边栏推荐
猜你喜欢
[signal and system]
AcWing 1148. 秘密的牛奶运输 题解(最小生成树)
子网划分、构造超网 典型题
移植DAC芯片MCP4725驱动到NUC980
Typical problems of subnet division and super network construction
Transplant DAC chip mcp4725 to nuc980
c语言—数组
Clickhouse fields are grouped and aggregated, and SQL is queried according to the granularity of any time period
字节P7专业级讲解:接口测试常用工具及测试方法,福利文
系统休眠文件可以删除吗 系统休眠文件怎么删除
随机推荐
使用nodejs完成判断哪些项目打包+发版
JS reverse -- ob confusion and accelerated music that poked the [hornet's nest]
免费白嫖的图床对比
Failed to successfully launch or connect to a child MSBuild. exe process. Verify that the MSBuild. exe
HMM 笔记
C语言实例_4
Taro中添加小程序 “lazyCodeLoading“: “requiredComponents“,
DS-5/RVDS4.0变量初始化错误
Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which
Make Jar, Not War
Add the applet "lazycodeloading": "requiredcomponents" in taro,
go-zero微服务实战系列(九、极致优化秒杀性能)
修改px4飞控的系统时间
各种语言,软件,系统的国内镜像,收藏这一个仓库就够了: Thanks-Mirror
AcWing 1148. 秘密的牛奶运输 题解(最小生成树)
C # method of calculating lunar calendar date 2022
C语言实例_5
Metauniverse urban legend 02: metaphor of the number one player
Appium基础 — Appium Inspector定位工具(一)
Comparison of picture beds of free white whoring