基于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中点击组件外关闭组件的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
• 详解vue.js2.0父组件点击触发子组件方法
• Vue中自定义全局组件的实现方法
• Vue组件之全局组件与局部组件的使用详解
• 详解vue.js全局组件和局部组件