La méthode d'implémentation de fermeture du composant après avoir cliqué sur le composant dans Vue

Cette fois, je vais vous présenter la méthode d'implémentation pour fermer le composant après avoir cliqué sur le composant dans Vue. Quelles sont les précautions pour fermer le composant après avoir cliqué sur le composant dans Vue. cas pratique. Jetons un coup d'oeil une fois.

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

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment vue.js insère des paramètres variables dans les attributs de balise

vue-cli lors de l'empaquetage du code Comment pour extraire les fichiers de configuration liés au projet

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!