So schließen Sie das Popup-Fenster in Uniapp

Uniapp ist ein beliebtes Cross-End-Entwicklungsframework, das es Entwicklern ermöglicht, mithilfe einer Reihe von Codes Anwendungen zu erstellen, die auf mehreren verschiedenen Plattformen gleichzeitig ausgeführt werden können. Als Anfänger oder Entwickler, der bei der Verwendung auf Probleme stößt, kann es jedoch sein, dass das Popup-Fenster (Popup) in uniapp nicht normal geschlossen werden kann. In diesem Artikel erfahren Sie, wie Sie Popup-Fenster in Uniapp schließen.

Zunächst ist es sehr wichtig, die grundlegende Verwendung von Popup-Fenstern in Uniapp zu verstehen. Wenn wir Popup-Fenster verwenden, müssen wir normalerweise zuerst die Komponentenbibliothek vorstellen, die wir auf der Seite verwenden müssen, z. B. die offiziell bereitgestellte vant-Komponente. Diese Komponentenbibliothek ist sehr umfangreich und einfach zu verwenden und enthält verschiedene Popup-Fenster. Fensterkomponenten nach oben. Nachdem wir die Komponentenbibliothek in die Seite eingeführt haben, können wir Popup-Komponenten für die Entwicklung verwenden. Das Folgende ist beispielsweise eine einfache Uniapp-Seite, die zeigt, wie eine grundlegende Popup-Komponente verwendet wird:

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom"></van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

Im obigen Beispiel verwenden wir die Popup-Komponente in der offiziell bereitgestellten vant-Komponentenbibliothek, um diese Komponente hinzuzufügen. Es wird eingeführt in die Seite ein und verwendet die v-model-Direktive, um das Ein- und Ausblenden des Popup-Fensters zu steuern. Klicken Sie auf die Schaltfläche „Popup-Fenster anzeigen“, um die Anzeige des Popup-Fensters zu steuern. Zu diesem Zeitpunkt wird auf der Seite ein Popup-Fenster angezeigt, das von unten angezeigt wird. v-model指令控制了弹窗的显示和隐藏。点击“显示弹窗”按钮可以控制弹窗的显示，此时页面中将会展示一个从底部弹出的弹窗。

但是有时候，我们在编写完弹窗代码之后发现弹窗不能关闭，原因通常是缺少关闭弹窗的事件处理函数。在uniapp中，关闭弹窗通常有两种方式：按钮关闭和自动关闭。

在使用按钮关闭时，我们需要在弹窗中加入一个“关闭”按钮，并在该按钮绑定点击事件，通过该事件触发v-model为true的变量，从而使弹窗关闭。以vant组件库中的Popup组件为例，代码如下：

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom">
      <view>
        <button type="default" @click="show = false">关闭</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

在上面的代码中，我们在弹窗中加入了一个“关闭”按钮，并在该按钮上绑定了一个点击事件，该事件将触发变量show为false，从而关闭弹窗。

除了按钮关闭，我们还可以通过自动关闭来关闭弹窗。在uniapp中，我们可以设置弹窗显示的时间，在这段时间之后弹窗将自动关闭。以vant组件库中的Popup组件为例，代码如下：

<template>
  <view class="content">
    <button type="primary" @click="show = true">显示弹窗</button>
    <van-popup v-model="show" position="bottom" :duration="2000"></van-popup>
  </view>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

在上面的代码中，我们通过:duration

Aber manchmal stellen wir nach dem Schreiben des Popup-Fenstercodes fest, dass das Popup-Fenster nicht geschlossen werden kann. Der Grund dafür ist normalerweise das Fehlen eines Ereignishandlers zum Schließen des Popup-Fensters. In Uniapp gibt es normalerweise zwei Möglichkeiten, Popup-Fenster zu schließen: Schließen per Schaltfläche und automatisches Schließen.

Wenn wir zum Schließen eine Schaltfläche verwenden, müssen wir dem Popup-Fenster eine Schaltfläche „Schließen“ hinzufügen, ein Klickereignis an die Schaltfläche binden und v-model auf true auslösen Variable, um das Popup-Fenster zu schließen. Am Beispiel der Popup-Komponente in der Vant-Komponentenbibliothek lautet der Code wie folgt: 🎜rrreee🎜Im obigen Code haben wir dem Popup-Fenster eine Schaltfläche „Schließen“ hinzugefügt und ein Klickereignis an den Schaltflächensatz gebunden Setzen Sie die Triggervariable <code>show auf false, um das Popup-Fenster zu schließen. 🎜🎜Zusätzlich zum Schließen der Schaltfläche können wir das Popup-Fenster auch durch automatisches Schließen schließen. In uniapp können wir die Anzeigezeit des Popup-Fensters festlegen, nach der das Popup-Fenster automatisch geschlossen wird. Am Beispiel der Popup-Komponente in der vant-Komponentenbibliothek lautet der Code wie folgt: 🎜rrreee🎜Im obigen Code stellen wir die Zeit für das automatische Schließen des Popup-Fensters auf 2000 Millisekunden oder 2 Sekunden ein :duration-Attribut Das Popup-Fenster wird automatisch geschlossen. Wenn der Benutzer das Popup-Fenster bei Verwendung des automatischen Schließens vorher schließen muss, kann er natürlich trotzdem die Schaltfläche verwenden, um das Schließen zu erzwingen. 🎜🎜Oben erfahren Sie, wie Sie Popup-Fenster in Uniapp schließen. Im Allgemeinen umfassen die Methoden zum Schließen von Popup-Fenstern hauptsächlich das Schließen von Schaltflächen und das automatische Schließen. Beim Schreiben von Popup-Fenstercode müssen Sie darauf achten, die entsprechende Ereignisverarbeitungsfunktion hinzuzufügen. Hier ist eine Methode zum Entwickeln von Popup-Fenstern mithilfe der offiziell bereitgestellten Komponentenbibliothek. Wenn Sie andere Komponentenbibliotheken von Drittanbietern oder benutzerdefinierte Komponentenbibliotheken verwenden, können Sie diese natürlich auch gemäß den entsprechenden Dokumenten entwickeln. Ich glaube, dass durch die Einführung dieses Artikels jeder die Methode zum Schließen von Popup-Fenstern in Uniapp beherrscht. Ich hoffe, dass er für alle Entwickler hilfreich sein kann. 🎜

Das obige ist der detaillierte Inhalt vonSo schließen Sie das Popup-Fenster in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!