vue实现右键菜单栏
更新时间:2022年04月10日 07:50:04 作者:-=|=-
这篇文章主要为大家详细介绍了vue实现右键菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了vue实现右键菜单栏的具体代码,供大家参考,具体内容如下
vue实现右键菜单栏和原生js大同小异,都是需要明白两个点
1.contextmenu事件是鼠标的右键点击事件
2.要阻止浏览器的默认右键事件
代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // methods rightShow() { let menu = this .$refs.msgRightMenu this .isPersoncontextMenus = true var evt = event || window.event; var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ; //给left和top分别赋值为鼠标的位置; menu.style.left = evt.pageX+ "px" ; menu.style.top = evt.pageY+ "px" ; //如果鼠标右边放不下菜单,就把left的值的改了 if (evt.pageX+100>clientWidth+scrollLeft){ //菜单应该在鼠标左边; var left1 = evt.pageX-100; menu.style.left = left1+ "px" ; } //如果鼠标下边放不下菜单,就把top的值的改了 if (evt.pageY+100>clientHeight+scrollTop){ var top1 = (evt.pageY-100); menu.style.top = top1+ "px" ; } menu.style.display = "block" ; }, showNo(){ let menu = this .$refs.msgRightMenu menu.style.display = "none" ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //css样式直供参考,根据自己的需要写样式 #menu{ list-style : none ; margin : 0px ; padding : 0px ; position : absolute ; display : none ; width : 100px ; height : 100px ; background-color : gray ; } #menu li{ margin : 0px ; padding : 0px ; } |
1 2 3 4 5 6 7 8 9 10 | //html < div @ click.self = "showNo" >//这个是最外层的盒子,加self修饰符可以不与其他事件冲突 < input type = "text" @ contextmenu.prevent = "rightShow" > //这里的prevent修饰符可以直接阻止浏览器的默认行为 < ul id = "menu" ref = "msgRightMenu" v-show = "isPersoncontextMenus" >//isPersoncontextMenus别忘了在data里定义这个变量 < li >鱼香肉丝</ li > < li >醋溜土豆丝</ li > < li >麻辣小龙虾</ li > < li >回锅肉</ li > </ ul > </ div > |
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue Router 配合 keep-alive 不生效的问题及解决方案
我在 app.vue 中使用了 router-view 标签,来展示 layout 和其他一级路由,然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由,下面给大家介绍Vue Router 配合 keep-alive 不生效的问题及解决方案,感兴趣的朋友一起看看吧2024-01-01
最新评论