So schließen Sie eine Komponente, indem Sie in Vue außerhalb der Komponente klicken (ausführliches Tutorial)

Im Folgenden werde ich Ihnen eine Implementierungsmethode zum Schließen einer Komponente vorstellen, die auf dem Klicken außerhalb der Komponente in Vue basiert. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Vue definiert eine globale Klickfunktion und der Parameter ist die Klick-Callback-Funktion.

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

Hören Sie sich das globale Klickereignis an, nachdem die Komponente gemountet wurde

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

Verstecken Sie das Element.

Rufen Sie den Dom-Knoten ab und bestimmen Sie, ob der übergeordnete Knoten vorhanden ist.

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So verwenden Sie UglifyJS zum Komprimieren und Zusammenführen von JS-Dateien unter Knoten

angularjs meldet einen Fehler nach der Verwendung von gulp- Uglify-Komprimierungslösung

Vue+ElementUI implementiert dynamisches Rendering und visuelle Konfiguration von Formularen

Das obige ist der detaillierte Inhalt vonSo schließen Sie eine Komponente, indem Sie in Vue außerhalb der Komponente klicken (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!