About the method of closing the component by clicking outside the component in Vue (detailed tutorial)

Below I will share with you an implementation method of closing a component based on clicking outside the component in Vue. It has a good reference value and I hope it will be helpful to everyone.

Vue defines a global click function, and the parameter is the click callback function.

Vue.prototype.globalClick = function (callback) { //页面全局点击
 $(document).click(callback);
}

Listen to global click events after the component is mounted

mounted:function () {
 this.globalClick(this.handleClickOut);
},

Hide elements.

Get the dom node and determine whether the parent exists to determine whether it needs to be closed.

handleClickOut:function (event) {
 if($(event.target).parents(".sys-add-user-dialog").length == 0){
  //隐藏元素
 }
},

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use UglifyJS to compress and merge JS files under node

##angularjs reports an error after using gulp-uglify compression Solution

Vue ElementUI’s method of dynamic rendering and visual configuration of forms

The above is the detailed content of About the method of closing the component by clicking outside the component in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!