Bagaimana untuk melaksanakan gesaan pop timbul penutupan tetingkap dalam Vue

Dengan pembangunan berterusan dan aplikasi teknologi hadapan, Vue telah menjadi pilihan pertama bagi lebih ramai jurutera hadapan. Walau bagaimanapun, dalam proses menggunakan Vue untuk membangunkan halaman, jika tiada gesaan yang sesuai, ia mungkin memberi pengguna pengalaman buruk.

Dalam aplikasi web, penutupan tetingkap boleh dicetuskan dalam pelbagai situasi, seperti pengguna menekan butang tutup penyemak imbas, menekan kekunci pintasan penyemak imbas, menamatkan proses, dsb. Jika kami terus menggunakan komponen Vue untuk membangunkan halaman tanpa memproses penutupan tetingkap, pengguna mungkin tidak menghadapi sebarang gesaan semasa menutup, yang menjejaskan pengalaman pengguna.

Untuk menyelesaikan masalah ini, kami perlu menambah gesaan penutupan tetingkap dalam Vue. Seterusnya, kami akan memperkenalkan cara melaksanakan gesaan pop timbul penutup tetingkap dalam Vue.

1. Tambahkan pendengar acara penutup tetingkap

Dalam komponen Vue, kita perlu terlebih dahulu menambah pendengar acara tutup tetingkap melalui fungsi cangkuk mounted, seperti yang ditunjukkan di bawah:

mounted () {
  window.addEventListener('beforeunload', this.handleWindowClose)
}

Antaranya, acara beforeunload dicetuskan apabila tetingkap hampir ditutup. Dalam fungsi pemprosesan acara handleWindowClose, kami boleh melakukan pemprosesan segera yang sepadan.

2. Memproses gesaan penutupan tetingkap

Dalam fungsi pemprosesan acara, pemprosesan segera yang berbeza boleh dirumuskan mengikut keperluan. Sebagai contoh, apabila pengguna mengedit borang, jika tetingkap ditutup, mereka perlu ditanya sama ada untuk menyimpan perubahan. Kita boleh menggunakan window.confirm untuk muncul kotak dialog, kodnya adalah seperti berikut:

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    if (window.confirm('是否保存修改？')) {
      saveForm()
    }
  }
}

Dalam kod di atas, formIsDirty dan saveForm ialah fungsi tersuai yang digunakan untuk menentukan sama ada borang itu mempunyai telah diubah suai, dan untuk disimpan. event.preventDefault() dan event.returnValue = '' digunakan untuk menghalang gelagat penutupan tetingkap lalai sistem untuk memastikan kotak gesaan semasa boleh muncul seperti biasa.

Selain mengesahkan menyimpan perubahan, kami juga boleh menambah gesaan lain. Sebagai contoh, apabila terdapat data yang tidak disimpan, pengguna digesa untuk mengesahkan sama ada untuk meninggalkan halaman. Kodnya adalah seperti berikut:

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    if (window.confirm('您有未保存的数据，是否确认离开？')) {
      // 不做处理，直接关闭窗口
    }
  }
}

Dalam kod di atas, kami menutup tetingkap terus tanpa melakukan sebarang pemprosesan dan pengguna perlu menyimpan data secara manual.

Selain itu, kami juga boleh menggunakan kotak gesaan tersuai untuk menyediakan kandungan segera yang lebih mesra. Contohnya, menggunakan pemalam Vue vue-snotify, anda boleh melaksanakan kotak gesaan yang serupa dengan rentetan. Kodnya adalah seperti berikut:

import Snotify, { SnotifyPosition } from 'vue-snotify'

Vue.use(Snotify)

// ...

handleWindowClose (event) {
  if (formIsDirty()) {
    event.preventDefault()
    event.returnValue = ''
    this.$snotify.confirm('您有未保存的数据，是否确认离开？', {
      position: SnotifyPosition.rightTop,
      closeOnClick: false,
      buttons: [
        { text: '否', action: () => {}},
        { text: '是', action: () => window.close()}
      ]
    })
  }
}

Dalam kod di atas, kami memperkenalkan pemalam vue-snotify dan memanggil kaedah this.$snotify.confirm dalam fungsi pemprosesan untuk memaparkan kotak pengesahan tersuai. Rangka kerja menyediakan banyak item konfigurasi yang boleh dikonfigurasikan mengikut keadaan sebenar.

Ringkasan

Di atas ialah cara melaksanakan gesaan pop timbul penutup tetingkap dalam Vue. Dengan menambahkan pendengar untuk acara penutupan tetingkap dan melaksanakan pemprosesan segera yang sepadan dalam fungsi pemprosesan acara, pengalaman pengguna aplikasi web boleh dipertingkatkan.

Sudah tentu, untuk beberapa keperluan khas, kami juga boleh menyesuaikan gaya gesaan penutupan tetingkap dan menyimpan operasi yang belum selesai melalui Ajax dan kaedah lain untuk mencapai pengalaman gesaan pengguna yang lebih maju.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan gesaan pop timbul penutupan tetingkap dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!