1. Implementation ideas
1. Use contextmenu event
This requirement requires intercepting the right-click event of the browser and changing it to a custom listening event. You can use @ to directly bind a listening function. Its function is to intercept the right-click event and trigger the bound listening event.
Secondly, in order to open the menu at the right-click position, we need to get the position of the mouse click; generally speaking, if the bound function does not have custom parameters, you can directly use the default parameter e to get it; if the bound function has custom parameters, you need to define $event to get the position, that is,
@="rightclick(index, indexMeasure, $event)
Finally, the horizontal X-axis value and vertical Y-axis value of the mouse click can be obtained through the parameter event, and then the menu is offset using fixed positioning, because the fixed positioning is relative to the browser window, and the obtained X and Y-axis values are also relative to the browser window.
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
2. Click anywhere outside the menu to close the menu
Just listen to the global click event in mounted
mounted () {
// Hide the menu when the mouse clicks on another location = function () {
= 'none';
}
}
3. Menu is placed at the top level of the layer
This requirement is to avoid triggering the listening function bound to other elements when clicking a menu item. This is actually related to the layer, we just need to place the menu to the top layer. The z-index attribute is used, as follows
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
2. Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>useVueCustom commands to implement right-click menu</title>
<script src="js/"></script>
<style>
/* Custom right-click menu */
#menu {
z-index: 999;
display: none;
position: fixed;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
#menu ul {
margin: 5px 0;
}
#menu li {
height: 30px;
line-height: 30px;
color: #21232E;
font-size: 12px;
text-align: center;
cursor: default;
list-style-type: none;
border-bottom: 1px dashed #cecece;
}
#menu li:hover {
background-color: #cccccc;
}
.block {
height: 300px;
width: 400px;
background-color: pink;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div >
<div style="position: relative;">
<div class="block" v-rightclick>1</div>
<div class="block" v-rightclick>2</div>
<div class="block" v-rightclick>3</div>
<div class="block" v-rightclick>4</div>
<div class="block" v-rightclick>5</div>
<div class="block" v-rightclick>6</div>
<!-- Customize the right mouse button menu -->
<div >
<ul>
<li v-for="item in rightMenuList" @click="">
{{}}
</li>
</ul>
</div>
</div>
</div>
<script>
('rightclick', function (el, binding) {
= function (e) {
('', )
// ('', )
();
= 'block';
= + 'px';
= + 'px';
}
});
var vm = new Vue({
el: '#itany',
data: {
rightMenuList: [
{
id: 0,
text: "Open channel",
handler: () => {
alert('The channel is opened successfully');
}
},
{
id: 1,
text: "Close the channel",
handler: () => {
alert('The channel is closed successfully');
}
},
{
id: 2,
text: "Restart channel",
handler: () => {
alert('The channel restart was successful');
}
},
]
},
methods: {
},
mounted () {
// Hide the menu when the mouse clicks on another location = function () {
= 'none';
}
}
});
</script>
</body>
</html>The above is the detailed explanation of the example of the right-click pop-up menu for Vue custom command implementation. For more information about the right-click pop-up menu for Vue custom command, please pay attention to my other related articles!