Bagaimana untuk melaksanakan tamat masa dan menutup tetingkap pop timbul dalam vue

Untuk tetingkap timbul dalam projek Vue, anda perlu mempertimbangkan bahawa pengguna mungkin terus menunggu tanpa membalas, yang akan membuatkan pengguna berasa tidak selesa. Untuk mengelakkan situasi ini, kami boleh menutup tetingkap pop timbul secara automatik dengan menetapkan tamat masa.

Pustaka UI Elemen digunakan dalam projek Vue untuk melaksanakan tetingkap pop timbul UI Elemen menyediakan komponen ElDialog untuk mencipta tetingkap timbul. Kita boleh menggunakan atribut beforeClose komponen ElDialog untuk melaksanakan fungsi menutup tetingkap pop timbul dari semasa ke semasa.

Dalam projek Vue, apabila tetingkap pop timbul dicipta, kita boleh menetapkan fungsi panggil balik melalui sifat beforeClose ElDialog Fungsi panggil balik ini akan dilaksanakan secara automatik sebelum tetingkap timbul ditutup. Kami boleh menetapkan pemasa dalam fungsi panggil balik dan klik butang "Sahkan" atau "Batal" pada tetingkap pop timbul dalam masa yang ditetapkan untuk menutup tetingkap timbul secara automatik.

Berikut ialah kaedah pelaksanaan khusus:

1 Dalam komponen tetingkap pop timbul, tetapkan atribut beforeClose dan tentukan fungsi panggil balik:

<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. Dalam tetingkap pop timbul Dalam komponen induk tetingkap, dengar penutup dan sahkan peristiwa komponen anak, dan ubah suai sifat tetingkap timbul yang boleh dilihat untuk mengawal pembukaan dan penutupan pop- atas tingkap.

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

Pada ketika ini, dalam projek Vue, menambahkan beberapa kod logik pada komponen tetingkap pop timbul boleh merealisasikan fungsi tamat masa untuk menutup tetingkap timbul.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan tamat masa dan menutup tetingkap pop timbul dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!