The implementation method of closing the component after clicking on the component in Vue

This time I will bring you the implementation method of closing the component after clicking on the component in Vue. What are the precautions of how to close the component after clicking on the component in Vue. The following is a practical case, let’s take a look. one time.

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

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, 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){
  //隐藏元素
 }
},

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

How vue.js inserts variable parameters in tag attributes

vue-cli when packaging code How to extract project-related configuration files

The above is the detailed content of The implementation method of closing the component after clicking on the component in Vue. For more information, please follow other related articles on the PHP Chinese website!