一、Vue右键菜单组件
Vue右键菜单是一个常用的功能组件，它用于在鼠标右键点击时弹出一个自定义的菜单。Vue的官方文档中并没有对右键菜单进行提及，但是我们可以借助第三方库element-ui中的ContextMenu组件来实现。
<template>
<div>
<el-button@contextmenu.native.prevent)="handleContextMenu">右键点击我</el-button>
<el-context-menuref="contextMenu">
<el-menu>
<el-menu-item>上传文件</el-menu-item>
<el-menu-item>新建文件夹</el-menu-item>
</el-menu>
</el-context-menu>
</div>
</template>
<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
components: {
ElButton,
ElContextMenu,
ElMenuItem,
ElMenu,
},
data() {
return {
contextMenu: null,
}
},
methods: {
handleContextMenu(event) {
event.preventDefault();
this.contextMenu.handleContextmenu(event);
}
}
}
</script>在上面的例子中，我们引入了element-ui库，并使用其中的ElButton, ElContextMenu, ElMenuItem, ElMenu组件来实现一个右键菜单。我们在页面中放置一个ElButton按钮，在其上添加了一个contextmenu.native.prevent事件监听，当我们在该按钮上右键点击时，该事件会被触发，并且我们通过调用handleContextMenu方法，让右键菜单弹出来。在ElContextMenu组件中，我们放置了一个ElMenu组件，并且给其添加了两个ElMenuItem组件，这两个菜单项就是我们的右键菜单选项。
二、Vue右键菜单怎么隐藏
当右键菜单弹出后，用户有可能会通过点击其他地方来关闭它，或者进行特定操作后需要关闭它。要关闭右键菜单，我们可以在Vue组件中保存一个ContextMenu实例，并且通过调用其隐藏方法来关闭该右键菜单。
<template>
<div>
<el-button@contextmenu.native.prevent)="handleContextMenu">右键点击我</el-button>
<el-context-menuref="contextMenu">
<el-menu>
<el-menu-item>上传文件</el-menu-item>
<el-menu-item>新建文件夹</el-menu-item>
</el-menu>
</el-context-menu>
</div>
</template>
<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
components: {
ElButton,
ElContextMenu,
ElMenuItem,
ElMenu,
},
data() {
return {
contextMenu: null,
}
},
methods: {
handleContextMenu(event) {
event.preventDefault();
this.contextMenu.handleContextmenu(event);
document.addEventListener('click', this.handleDocumentClick);
},
handleDocumentClick() {
this.contextMenu.hide();
document.removeEventListener('click', this.handleDocumentClick);
}
}
}
</script>在上面的例子中，我们通过document.addEventListener()方法来监听document的click事件。当用户在页面中点击其他地方时，该事件会被触发。同时，我们也通过document.removeEventListener()方法来移除监听器。在handleContextMenu方法中，我们除了调用handleContextmenu方法打开右键菜单外，还添加了一个click事件监听器，该监听器会在handleContextMenu方法调用后加入。
当用户点击页面其他地方时，handleDocumentClick方法会被调用。在这个方法中，我们调用了contextMenu实例的hide()方法来隐藏右键菜单，同时移除click事件监听器。
三、Vue右键菜单指令
除了在组件中使用右键菜单功能，我们还可以通过Vue指令来实现右键菜单功能。
<template>
<div>
<divv-right-click-menu="menuOptions">右键点击我</divv-right-click-menu>
</div>
</template>
<script>
import DivvRightClickMenu from './divv-right-click-menu';
export default {
directives: {
DivvRightClickMenu,
},
data() {
return {
menuOptions: [
{
name: '上传文件',
action: () => {
console.log('upload file');
},
},
{
name: '新建文件夹',
action: () => {
console.log('create folder');
},
},
],
}
},
}
</script>在上面的例子中，我们定义了一个指令DivvRightClickMenu，并且在页面中使用它。该指令会在被绑定的元素上添加一个contextmenu监听事件。同时，我们在数据中定义了一个menuOptions数组，其中包含了菜单选项的名称和执行方法。当用户右键点击指定元素时，菜单会弹出来，当菜单选项被选中时，指定的方法将会被执行。
四、Vue右键菜单组件element
除了第三方库element-ui提供的ContextMenu组件之外，Vue的其他第三方库中也可能会包含右键菜单组件。
<template>
<div>
<b-right-click-menu@click-item="(index) => handleClick(index)">
<b-menu-item v-for="(item, index) in menuOptions" :key="index">{{ item.name }}</b-menu-item>
</b-right-click-menu>
</div>
</template>
<script>
import { BRightClickMenu, BMenuItem } from 'bootstrap-vue';
export default {
components: {
BRightClickMenu,
BMenuItem,
},
data() {
return {
menuOptions: [
{
name: '上传文件',
},
{
name: '新建文件夹',
},
],
}
},
methods: {
handleClick(index) {
const menuItem = this.menuOptions[index];
console.log(`click ${menuItem.name}`);
},
},
}
</script>在上面的例子中，我们使用了Bootstrap Vue库中的BRightClickMenu和BMenuItem组件来实现右键菜单功能。我们在页面中放置了一个BRightClickMenu组件，并且在其内部放置了多个BMenuItem组件，这些组件就是我们的右键菜单选项。我们可以通过@click-item事件来监听右键菜单选项的点击事件，当用户点击时，handleClick方法会被调用，我们通过查找当前选中菜单的索引，来执行指定的方法。
五、Vue右键菜单被覆盖
在使用右键菜单时，我们有时会遇到被菜单本身或其他弹出组件覆盖住的情况。为了解决这个问题，我们可以通过通过计算菜单在页面中的位置，并在显示菜单时将其放置在最顶部。
// 组件部分
<template>
<div>
<el-button@contextmenu.native.prevent)="handleContextMenu">右键点击我</el-button>
<el-context-menuv-if="visible" ref="contextMenu">
<el-menu>
<el-menu-item>上传文件</el-menu-item>
<el-menu-item>新建文件夹</el-menu-item>
</el-menu>
</el-context-menu>
</div>
</template>
<script>
import { ElButton, ElContextMenu, ElMenuItem, ElMenu } from 'element-ui';
export default {
components: {
ElButton,
ElContextMenu,
ElMenuItem,
ElMenu,
},
data() {
return {
visible: false,
}
},
methods: {
handleContextMenu(event) {
event.preventDefault();
this.visible = true;
const contextMenu = this.$refs.contextMenu.$el;
contextMenu.style.display = 'block';
const x = event.clientX;
const y = event.clientY;
const menuWidth = contextMenu.offsetWidth;
const menuHeight = contextMenu.offsetHeight;
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
if (x + menuWidth > screenWidth) {
contextMenu.style.left = `${screenWidth - menuWidth}px`;
} else {
contextMenu.style.left = `${x}px`;
}
if (y + menuHeight > screenHeight) {
contextMenu.style.top = `${screenHeight - menuHeight}px`;
} else {
contextMenu.style.top = `${y}px`;
}
document.addEventListener('click', this.handleDocumentClick);
},
handleDocumentClick() {
this.$refs.contextMenu.hide();
this.visible = false;
document.removeEventListener('click', this.handleDocumentClick);
}
}
}
</script>在上面的例子中，我们在handleContextMenu方法中添加了一些代码，用于计算菜单应该出现的位置。我们通过获取点击事件的clientX和clientY来获取菜单应该出现的坐标，然后获取菜单的宽度和高度，以及屏幕的宽度和高度。通过这些变量的计算，我们可以计算出菜单应当出现的位置，并将其放置在屏幕的最顶部。同时，我们还有将visible变量保存为true，这样我们就可以在组件中判断菜单是否正在显示，并正确隐藏它。
