A propos de la méthode de fermeture du composant en cliquant à l'extérieur du composant dans Vue (tutoriel détaillé)

Ci-dessous, je vais partager avec vous une méthode d'implémentation pour fermer un composant basée sur un clic en dehors du composant dans Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Vue définit une fonction de clic globale, et le paramètre est la fonction de rappel de clic.

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

Écoutez l'événement de clic global une fois le composant monté

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

Masquer l'élément.

Récupérez le nœud dom et déterminez si le parent existe pour déterminer s'il doit être fermé

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde. à l'avenir.

Articles connexes :

Comment utiliser UglifyJS pour compresser et fusionner des fichiers JS sous le nœud

angularjs signale une erreur après avoir utilisé gulp- Solution de compression uglify

Vue+ElementUI implémente le rendu dynamique et la configuration visuelle des formulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!