vue akan muncul gesaan selepas beberapa saat

Vue ialah rangka kerja JavaScript moden yang digunakan secara meluas dalam pembangunan web. Dalam proses pembangunan web, kami sering menghadapi senario di mana kotak gesaan perlu muncul selepas tempoh masa tertentu. Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencapai fungsi ini.

1. Kira detik Vue

Dalam Vue, anda boleh melaksanakan kira detik dengan mudah menggunakan pemasa. Berikut ialah contoh penggunaan Vue untuk melaksanakan kod kira detik yang mudah:

<template>
  <div>
  <p>剩余<span>{{second}}</span>秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      second: 5 // 设置初始秒数
    };
  },
  created() {
    let timer = setInterval(() => {
      this.second--; // 每隔1s秒减1
      if (this.second == 0) {
        clearInterval(timer);
        alert("时间到！"); // 达到时间后弹出提示框
      }
    }, 1000);
  }
};
</script>

Dalam kod di atas, kita mula-mula mentakrifkan bilangan saat awal, dan kemudian memulakan pemasa dalam kitaran hayat yang dibuat oleh Vue, setiap 1 saat Kurangkan saat dengan 1 dan semak sama ada had atas masa telah dicapai. Jika had atas tercapai, kosongkan pemasa dan timbulkan kotak gesaan.

2. Gunakan pembangunan pemalam Vue

Untuk merealisasikan kotak gesaan pop timbul dalam Vue dengan lebih mudah, kami boleh membangunkan pemalam Vue untuk melaksanakannya. Berikut ialah contoh kod untuk melaksanakan pemalam kotak gesaan Vue:

import Vue from 'vue'
import AlertComponent from './components/alert.vue'

// 构建一个Alert实例
const Alert = Vue.extend(AlertComponent)

let interval = null

// 定义插件对象
const AlertPlugin = {
  install(Vue, options = {}) {
    // 生成一个实例对象
    const instance = new Alert()

    // 挂载到一个元素上
    instance.$mount(document.createElement('div'))

    // 将实例添加到Vue原型上
    Vue.prototype.$alert = {
      show() {
        // 显示alert
        document.body.appendChild(instance.$el)

        // 5s后自动消失
        interval = setTimeout(() => {
          document.body.removeChild(instance.$el)
        }, options.time || 5000)
      },
      hide() {
        // 隐藏alert
        document.body.removeChild(instance.$el)
        clearTimeout(interval)
      }
    }
  }
}

export default AlertPlugin

Dalam kod di atas, kami mula-mula memperkenalkan komponen Vue dan amaran, kemudian mencipta tika Alert melalui Vue.extend, dan kemudian menentukan Objek pemalam AlertPlugin, yang Contoh Alert dipasang pada prototaip Vue melalui Vue.prototype, dan kaedah tunjukkan dan sembunyikan dilaksanakan untuk memaparkan dan menyembunyikan kotak gesaan Amaran. Antaranya, options.time mewakili masa paparan kotak gesaan, yang lalai kepada 5 saat.

Akhir sekali, kita perlu mengimport pemalam ke dalam projek Vue dan menggunakan kaedah Vue.use() untuk mendayakan pemalam Hanya panggil kaedah $alert.show() Vue di mana kotak gesaan perlu muncul dengan mudah untuk mencapai kesan kotak gesaan pop timbul.

3. Ringkasan

Artikel ini memperkenalkan dua kaedah menggunakan Vue untuk muncul gesaan selepas beberapa saat: menggunakan pemasa Vue dan membangunkan pemalam Vue. Antaranya, kaedah pemasa adalah lebih mudah dan anda boleh mengawal gaya kotak gesaan secara bebas, tetapi anda perlu melaksanakan pemasa secara manual. Kaedah pemalam adalah lebih maju Ia hanya memerlukan panggilan mudah untuk merealisasikan fungsi gesaan pop timbul, tetapi ia memerlukan kebiasaan dengan kemahiran pembangunan pemalam Vue. Anda perlu memilih kaedah pelaksanaan yang berbeza berdasarkan senario perniagaan tertentu dan tahap teknikal anda sendiri.

Atas ialah kandungan terperinci vue akan muncul gesaan selepas beberapa saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!