So verbergen Sie das aktuelle Element in vuejs

Die Implementierungsmethode zum Ausblenden des aktuellen Elements in vuejs: 1. Nachdem die Seite bereitgestellt wurde, hören Sie sich das globale Klickereignis an. 2. Rufen Sie das aktuell angeklickte Element ab und rufen Sie die Attribute des aktuellen Elements selbst entsprechend den Anforderungen ab . Bestimmen Sie, ob das aktuell angeklickte Element ausgeblendet werden soll. 4. Wenn das aktuell angeklickte Element nicht mit dem auszublendenden Element übereinstimmt, wird es ausgeblendet.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie verstecke ich das aktuelle Element in Vuejs?

Vue implementiert das aktuelle Element, um das aktuelle Element (Implementierungsidee) zu verbergen. Hören Sie sich nach dem Mounten das globale Klickereignis an

Rufen Sie das aktuell angeklickte Element ab und rufen Sie die Attribute des aktuellen Elements selbst gemäß den Anforderungen ab

Beurteilen Sie, ob das aktuell angeklickte Element mit dem auszublendenden Element identisch ist

Das Das aktuell angeklickte Element ist nicht dasselbe wie das auszublendende Element. Dann ausblenden

4. Der endgültige Effekt

• Dann sehen wir uns an, wie Vue das Klicken auf das Zielelement implementiert, um das Popup-Fenster an anderer Stelle auszublenden die Seite
• Methode:
• Schritt 1: Geben Sie das äußerste Element der Seite pAdd click event : @click="popShow = false".

Schritt 2: Fügen Sie dem Klickzielelement ein Klickereignis hinzu: @click="popShow = true".

Hinweis: popShow ist ein Flag, das das Anzeigen und Ausblenden von Popup-Fenstern steuert.

🏜 Methode 2 (besser):

Fügen Sie ein Klickereignis zum äußersten p hinzu @click="userClick=false"

Fügen Sie zum angeklickten Element hinzu: @click.stop= " userClick=!userClick"

Methode 3:

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

：@click=“popShow = false”。

步骤2：给点击目标元素加点击事件：@click=“popShow = true”。

备注：popShow 为控制弹窗显示与隐藏的标志。

PS：下面看下vue实现点击其他地方隐藏p

方法一：　　

　　通过监听事件

<template>
<!--向页面添加关闭p的事件监听-->
<p class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示p-->
<button @click.stop="show">点击显示p</button>

<!--指定的p。添加.stop防止点击p内的元素时，整个p被关闭-->
<p @click.stop>
...
</p>

</p>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

方法二（比较好）：

　　给最外层的p加个点击事件 @click="userClick=false"

　　给点击的元素上面加上：@click.stop="userClick=!userClick"Zusammenfassung:

Verwenden Sie den .stop-Modifikator des vue.js-Ereignisses, um zu verhindern, dass das Ereignis weiter in die Luft sprudelt, oder Sie können das Ereignis verwenden der nativen js-Ereignismethode .stopPropagation().

Durch das Hinzufügen von .stop zum angegebenen p können Sie erkennen, dass nur dann, wenn Sie auf ein Element klicken, das sich nicht innerhalb des p befindet, es auf der Seite angezeigt wird, wodurch das p ausgeblendet wird, wenn Sie auf eine andere Stelle klicken.

Fügen Sie .stop zur Schaltfläche hinzu, die die Anzeige von p auslöst. Andernfalls wird show() ausgelöst und dann an die Seite weitergegeben, hide() wird sofort ausgelöst und p nicht angezeigt werden.

Empfohlen: „
Die neueste Auswahl von 5 vue.js-Video-Tutorials

“

Das obige ist der detaillierte Inhalt vonSo verbergen Sie das aktuelle Element in vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!