Comment fermer la fenêtre pop-up dans uniapp

Uniapp est un framework de développement cross-end populaire, qui permet aux développeurs d'utiliser un ensemble de codes pour créer des applications pouvant s'exécuter sur plusieurs plates-formes différentes en même temps. Cependant, en tant que débutant ou développeur rencontrant des problèmes lors de l'utilisation, vous pouvez rencontrer le problème que la fenêtre pop-up (Popup) d'uniapp ne peut pas être fermée normalement. Cet article explique comment fermer les fenêtres contextuelles dans uniapp.

Tout d'abord, il est très important de comprendre l'utilisation de base des fenêtres pop-up dans uniapp. Habituellement, lorsque nous utilisons des fenêtres contextuelles, nous devons d'abord introduire la bibliothèque de composants que nous devons utiliser dans la page, comme le composant vant officiellement fourni. Cette bibliothèque de composants est très riche et facile à utiliser, et elle contient diverses fenêtres contextuelles. composants de fenêtre. Après avoir introduit la bibliothèque de composants dans la page, nous pouvons utiliser des composants contextuels pour le développement. Par exemple, ce qui suit est une simple page uniapp, qui montre comment utiliser un composant pop-up de base :

<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>

Dans l'exemple ci-dessus, nous utilisons le composant Popup dans la bibliothèque de composants vant officiellement fournie pour ajouter ce composant. Il est introduit dans la page et utilise la directive v-model pour contrôler l'affichage et le masquage de la fenêtre contextuelle. Cliquez sur le bouton « Afficher la fenêtre contextuelle » pour contrôler l'affichage de la fenêtre contextuelle. À ce stade, une fenêtre contextuelle qui apparaît du bas sera affichée sur la page. 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

Mais parfois, après avoir écrit le code de la fenêtre pop-up, nous constatons que la fenêtre pop-up ne peut pas être fermée. La raison est généralement l'absence d'un gestionnaire d'événements pour fermer la fenêtre pop-up. Dans uniapp, il existe généralement deux manières de fermer les fenêtres contextuelles : la fermeture par bouton et la fermeture automatique.

Lorsque nous utilisons un bouton pour fermer, nous devons ajouter un bouton "fermer" à la fenêtre contextuelle, lier un événement de clic au bouton et déclencher v-model sur true variable pour fermer la fenêtre contextuelle. En prenant le composant Popup dans la bibliothèque de composants vant comme exemple, le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un bouton "Fermer" à la fenêtre contextuelle et lié un événement de clic au bouton Set. la variable de déclenchement <code>show sur false pour fermer la fenêtre pop-up. 🎜🎜En plus de fermer le bouton, nous pouvons également fermer la fenêtre pop-up grâce à la fermeture automatique. Dans uniapp, nous pouvons définir l'heure d'affichage de la fenêtre contextuelle, après quoi la fenêtre contextuelle se fermera automatiquement. En prenant le composant Popup dans la bibliothèque de composants vant comme exemple, le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous définissons le temps de fermeture automatique de la fenêtre contextuelle à 2000 millisecondes, ou 2 secondes, via le Attribut :duration La fenêtre pop-up se fermera automatiquement. Bien entendu, lors de l’utilisation de la fermeture automatique, si l’utilisateur doit fermer la fenêtre pop-up à l’avance, il peut toujours utiliser le bouton pour forcer sa fermeture. 🎜🎜Ce qui précède explique comment fermer les fenêtres contextuelles dans uniapp. En général, les méthodes de fermeture des fenêtres contextuelles incluent principalement la fermeture des boutons et la fermeture automatique. Lors de l'écriture du code de la fenêtre contextuelle, vous devez faire attention à l'ajout de la fonction de traitement des événements correspondante. Voici une méthode pour développer des fenêtres contextuelles à l'aide de la bibliothèque de composants vant officiellement fournie. Bien sûr, si vous utilisez d'autres bibliothèques de composants tierces ou personnalisées, vous pouvez également développer selon les documents correspondants. Je pense que grâce à l'introduction de cet article, tout le monde maîtrise la méthode de fermeture des fenêtres contextuelles dans uniapp. J'espère que cela sera utile à tous les développeurs. 🎜

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!