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

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!