小编给大家分享一下Vue如何实现右键菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
npm install vue-contextmenujs
或
计算
安全
数据库
网络和加速
企业服务
yarn add vue-contextmenujs使用
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);以element-ui图标为例实现右键菜单，图标会为被渲染为<i class="icon"></i>，代码如下：
<template>
<div @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
export default {
methods: {
onContextmenu(event) {
this.$contextmenu({
items: [
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}
},
{ label: "前进(F)", disabled: true },
{ label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
{ label: "另存为(A)..." },
{ label: "打印(P)...", icon: "el-icon-printer" },
{ label: "投射(C)...", divided: true },
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
},
{
label: "截取网页(R)",
minWidth: 0,
children: [
{
label: "截取可视化区域",
onClick: () => {
this.message = "截取可视化区域";
console.log("截取可视化区域");
}
},
{ label: "截取全屏" }
]
},
{ label: "查看网页源代码(V)", icon: "el-icon-view" },
{ label: "检查(N)" }
],
event, // 鼠标事件信息
customClass: "custom-class", // 自定义菜单 class
zIndex: 3, // 菜单样式 z-index
minWidth: 230 // 主菜单最小宽度
});
return false;
}
}
};
</script>菜单选项都在items数组里面，可根据需要自行配置。这时候点击右键，菜单弹窗就神奇地出现了，是不是很简单!
打开控制台，查看元素即可查看到菜单的各个 class 名称。最外层的 class 为上面的customClass属性设置的值，样式可根据需求自行调整。
<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
background: #ffecf2 !important;
color: #ff4050 !important;
}
</style>
以上就基本使用方法，是不是比自己封装节省了大把时间。注意菜单会在点击左键或者滚轮滚动时自动销毁，同时也可调用this.$contextmenu.destroy()在其他场景自行销毁 。以下是插件的参数配置：
MenuOptions 菜单属性
MenuItemOptions 选项属性
看完了这篇文章，相信你对“Vue如何实现右键菜单”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
