Comment implémenter le délai d'attente et fermer la fenêtre contextuelle dans vue

Pour les fenêtres contextuelles des projets Vue, vous devez considérer que les utilisateurs peuvent continuer à attendre sans répondre, ce qui les mettra mal à l'aise. Afin d'éviter cette situation, nous pouvons fermer automatiquement la fenêtre contextuelle en définissant un délai d'attente.

La bibliothèque Element UI est utilisée dans le projet Vue pour implémenter des fenêtres contextuelles. Element UI fournit le composant ElDialog pour créer des fenêtres contextuelles. Nous pouvons utiliser l'attribut beforeClose du composant ElDialog pour implémenter la fonction de fermeture de la fenêtre pop-up au fil du temps.

Dans le projet Vue, lorsque la fenêtre pop-up est créée, nous pouvons définir une fonction de rappel via la propriété beforeClose d'ElDialog, et cette fonction de rappel sera automatiquement exécutée avant la fermeture de la fenêtre pop-up. Nous pouvons définir une minuterie dans la fonction de rappel et cliquer sur le bouton « Confirmer » ou « Annuler » de la fenêtre contextuelle dans le délai spécifié pour fermer automatiquement la fenêtre contextuelle.

Voici la méthode d'implémentation spécifique :

1. Dans le composant de la fenêtre pop-up, définissez l'attribut beforeClose et spécifiez une fonction de rappel :

<template>
  <el-dialog
    title="弹窗标题"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <span>弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>     
      <el-button type="primary" @click="confirmDialog" >确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        timer: null, // 定时器
        timeout: 5000, // 超时时间，单位毫秒
      }
    },
    methods: {
      handleClose (done) {
        clearTimeout(this.timer) // 清除定时器
        done() // 关闭弹窗
      },
      confirmDialog () {
        // 点击“确认”按钮时，手动关闭定时器，调用 done() 关闭弹窗
        clearTimeout(this.timer)
        this.$emit('confirm')
      },
      closeDialog () {
        this.$emit('close')
      }
    },
    mounted: function () {
      // 定义一个 5 秒后自动关闭弹窗的定时器
      this.timer = setTimeout(() => {
        this.$emit('close')
      }, this.timeout)
    },
  }
</script>

2. écoutez les événements de fermeture et de confirmation du composant enfant et modifiez l'attribut visible de la fenêtre contextuelle pour contrôler l'ouverture et la fermeture de la fenêtre contextuelle.

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹窗</el-button>
    <my-dialog
      :visible="dialogVisible"
      @close="dialogVisible = false"
      @confirm="dialogVisible = false"
    ></my-dialog>
  </div>
</template>

<script>
  import MyDialog from './MyDialog.vue'
  export default {
    components: {
      MyDialog
    },
    data () {
      return {
        dialogVisible: false
      }
    },
    methods: {
      showDialog () {
        this.dialogVisible = true
      },
    },
  }
</script>

À ce stade, dans le projet Vue, l'ajout de code logique au composant de fenêtre contextuelle peut réaliser la fonction de délai d'attente de fermeture de la fenêtre contextuelle.

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!