这篇文章主要介绍了Vue 原生实现右键菜单组件功能，本文给大家扩展知识点vue点击菜单以外区域，隐藏菜单操作，通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
Vue 原生实现右键菜单组件, 零依赖
快速安装
npm install vue-contextmenujs
使用
测试中使用的是 element-ui 图标
import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <div id="app" style="width:100vw;height:100vh"></div>
ps：下面看下vue点击菜单以外区域，隐藏菜单操作
data() { return { menuShow: false<strong>本文来源gaodai#ma#com搞@@代~&码网</strong> //v-show标识隐藏显示 } }, mounted (){ let _this = this; document.addEventListener('click', function (e) { // 下面这句代码是获取 点击的区域是否包含你的菜单，如果包含，说明点击的是菜单以外，不包含则为菜单以内 let flag = e.target.contains(document.getElementsByClassName('menu-class')[0]) console.log(flag) if(!flag) return _this.menuShow = false }) }
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是原生Vue 实现右键菜单组件功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：原生Vue 实现右键菜单组件功能
转载请注明原文链接：原生Vue 实现右键菜单组件功能
