So implementieren Sie eine Zeitüberschreitung und schließen das Popup-Fenster in Vue

Bei Popup-Fenstern in Vue-Projekten müssen Sie berücksichtigen, dass Benutzer möglicherweise weiter warten, ohne zu antworten, was dazu führt, dass sich Benutzer unwohl fühlen. Um diese Situation zu vermeiden, können wir das Popup-Fenster automatisch schließen, indem wir ein Timeout festlegen.

Die Element UI-Bibliothek wird im Vue-Projekt zum Implementieren von Popup-Fenstern verwendet. Element UI stellt die ElDialog-Komponente zum Erstellen von Popup-Fenstern bereit. Wir können das beforeClose-Attribut der ElDialog-Komponente verwenden, um die Funktion zum Schließen des Popup-Fensters im Laufe der Zeit zu implementieren.

Im Vue-Projekt können wir beim Erstellen des Popup-Fensters über die beforeClose-Eigenschaft von ElDialog eine Rückruffunktion festlegen. Diese Rückruffunktion wird automatisch ausgeführt, bevor das Popup-Fenster geschlossen wird. Wir können in der Rückruffunktion einen Timer einstellen und innerhalb der angegebenen Zeit auf die Schaltfläche „Bestätigen“ oder „Abbrechen“ des Popup-Fensters klicken, um das Popup-Fenster automatisch zu schließen.

Das Folgende ist die spezifische Implementierungsmethode:

1 Legen Sie in der Komponente des Popup-Fensters das beforeClose-Attribut fest und geben Sie eine Rückruffunktion an:

<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. Hören Sie auf die Schließ- und Bestätigungsereignisse der untergeordneten Komponente und ändern Sie das sichtbare Attribut des Popup-Fensters, um das Öffnen und Schließen des Popup-Fensters zu steuern.

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

An diesem Punkt kann im Vue-Projekt durch Hinzufügen von Logikcode zur Popup-Fensterkomponente die Timeout-Funktion zum Schließen des Popup-Fensters realisiert werden.

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