vue右键自定义菜单,vue右键弹出菜单
今天给大家分享的是如何在最短的时间内实现右键菜单。高效实现需求，避免重复做轮子。有兴趣的可以了解一下。
目录
效果图安装
代码实现
自定义样式
摘要
高效实现需求，避免重复做轮子。今天给大家分享的是如何在最短的时间内实现右键菜单。方法也很简单，一个插件就可以搞定，不多说，效果图上：
效果图
安装
npm安装vue-contextmenujs
或者
纱线添加vue-contextmenujs
使用
从“vue-contextmenujs”导入上下文菜单
Vue.use(上下文菜单)；
代码实现
以element-ui图标为例实现右键菜单。图标将呈现为i class=icon/i，代码如下：
模板
div style= width:100 VW；height:100 VH @ context menu . prevent= on context menu /div
/模板
脚本
从“vue”导入Vue
从“vue-contextmenujs”导入上下文菜单
Vue.use(上下文菜单)；
导出默认值{
方法：{
onContextmenu(事件){
这个。$contextmenu({
项目：[
{
标签:“return (b)”,
onClick: ()={
this . message= return(b)；
console . log( return(b))；
}
},
{label: forward (F)，disabled: true}
{label: Reload (R)，divided: true，icon: El-icon-refresh}，
{标签:另存为.},
{label:打印(P).icon: el-icon-printer}，
{label:投影(C).divided: true}，
{
标签:“使用网页翻译”，
分：真的，
最小宽度：0，
孩子：[{ label:翻译成简体中文 }，{ label:翻译成繁体中文 }]
},
{
标签:“拦截网页”，
最小宽度：0，
儿童：[
{
标签:“截取可视化区域”，
onClick: ()={
This.message=截取可视化区域；
Console.log(截取可视化区域)；
}
},
{label:“全屏捕捉”}
]
},
{label:查看网页源代码，icon: El-icon-view}，
{label:检查(N)}
],
事件，//鼠标事件信息
CustomClass: custom-class ，//自定义菜单类
ZIndex: 3，//菜单样式z-index
MinWidth: 230 //主菜单的最小宽度
});
返回false
}
}
};
/脚本
选项都在items数组中，可以根据需要进行配置。此时右击，菜单弹出窗口神奇出现。是不是很简单！
自定义样式
打开控制台并查看元素，以查看菜单的类名。最外层的类是上面customClass属性设置的值，样式可以根据需要调整。
风格。定制级。menu _ item _ _可用：悬停、定制级。菜单_项目_展开{
背景：#ffecf2！重要；
颜色：#ff4050！重要；
}
/风格
总结
至于上面的基本用法，是不是比自己包装要节省很多时间？请注意，当单击左键或滚动滚轮时，菜单会自动销毁，而这。在其他场景中也可以调用$contextmenu.destroy()来销毁自身。以下是插件的参数配置：
菜单选项菜单属性
菜单选项选项属性
关于1分钟Vue实现右键菜单的这篇文章到此为止。更多相关Vue右键菜单内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。