基于Vue中点击组件外关闭组件的实现方法
更新时间：2018年03月06日 15:28:43 作者：zjw0742
下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue定义全局点击函数，参数为点击的回调函数。
Vue.prototype.globalClick = function (callback) { //页面全局点击
$(document).click(callback);
}
组件挂载后监听全局的点击事件
mounted:function () {
this.globalClick(this.handleClickOut);
},
隐藏元素。
取到dom节点，判断父级是否存在来判断是否需要来关闭
handleClickOut:function (event) {
if($(event.target).parents(".sys-add-user-dialog").length == 0){
//隐藏元素
}
},
以上这篇基于Vue中点击组件外关闭组件的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-ui中this.$confirm提示文字中部分有颜色自定义方法
this.$confirm是一个Vue.js中的弹窗组件,其样式可以通过CSS进行自定义,下面这篇文章主要给大家介绍了关于element-ui中this.$confirm提示文字中部分有颜色的自定义方法,需要的朋友可以参考下2024-02-02
Suspense 是 Vue 3 中用于处理异步数据加载的特性,它使得在加载异步数据时可以提供更好的用户体验,下面小编就来和大家详细讲讲Suspense如何优雅处理异步数据加载吧2023-10-10
这篇文章主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧2024-01-01
在 Vue.js 开发中,合理地控制元素的样式对于构建高质量的用户界面至关重要,Vue 提供了灵活的方式来绑定样式,这篇文章将探索 Vue 中设置样式的七种做法,并结合代码,逐步说明每种方法的实现,需要的朋友可以参考下2024-03-03
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下2023-02-02
最新评论