Vue中点击组件外关闭组件 基于Vue中点击组件外关闭组件的实现方法
zjw0742 人气:0想了解基于Vue中点击组件外关闭组件的实现方法的相关内容吗,zjw0742在本文为您仔细讲解Vue中点击组件外关闭组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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中点击组件外关闭组件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容