这篇文章主要介绍原生Vue怎么实现右键菜单组件功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Vue原生实现右键菜单组件,零依赖
import Contextmenu 得到“vue-contextmenujs"
Vue.use(快捷菜单);
& lt; template>
,& lt; div id=癮pp",, @contextmenu.prevent=皁nContextmenu"祝辞& lt;/div>
& lt;/template>
& lt; script>
export default {
,方法:{
,,onContextmenu事件(事件),{
美元,才能这样。快捷菜单({
,,,项目:,(
,,,,{
,,,,,标签:,“返回(B)“,
,,,,,onClick:,(),=祝辞,{
,,,,,,this.message =,“返回(B)“;
,,,,,,console.log(“返回(B)“);
,,,,,}
,,,,},
,,,,{,标签:“前进(F),,,禁用:,true },
,,,,{,标签:“重新加载(R)“,,划分:,真的,,图标:,“el-icon-refresh",},
,,,,{,标签:“另存为(A)…“,},
,,,,{,标签:“打印(P)…“,,图标:,“el-icon-printer",},
,,,,{,标签:“投射(C)…“,,划分:,true },
,,,,{
,,,,,标签:,“使用网页翻译(T)“,
,,,,,划分:,真的,
,,,,,minWidth:, 0,
,,,,,孩子们:,[{,标签:“翻译成简体中文,,},,{,标签:“翻译成繁体中文“,}]
,,,,},
,,,,{
,,,,,标签:,“截取网页(R)“,
,,,,,minWidth:, 0,
,,,,,孩子们:,(
,,,,,,{
,,,,,,,标签:,“截取可视化区域“,
,,,,,,,onClick:,(),=祝辞,{
,,,,,,,,this.message =,“截取可视化区域“;
,,,,,,,,console.log(“截取可视化区域“);
,,,,,,,}
,,,,,,},
,,,,,,{,标签:“截取全屏,,}
,,,,,)
,,,,},
,,,,{,标签:“查看网页源代码(V)“,,图标:,“el-icon-view",},
,,,,{,标签:“检查(N)“,}
,,,,
,,,,
,,,customClass:,“class-a"
,,,zIndex:, 3,
,,,minWidth: 230
,,});
,,return 假;
,,}
,}
};
& lt;/script>
ps:下面看下vue点击菜单以外区域,隐藏菜单操作
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
以上是“原生Vue怎么实现右键菜单组件功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
