Comment implémenter l'invite contextuelle de fermeture de fenêtre dans Vue

Avec le développement et l'application continus de la technologie front-end, Vue est devenue le premier choix de plus en plus d'ingénieurs front-end. Cependant, lors du processus d'utilisation de Vue pour développer des pages, s'il n'y a pas d'invite appropriée, cela peut donner aux utilisateurs une mauvaise expérience.

Dans les applications Web, la fermeture de la fenêtre peut être déclenchée dans diverses circonstances, telles que l'utilisateur appuyant sur le bouton de fermeture du navigateur, appuyant sur la touche de raccourci du navigateur, mettant fin au processus, etc. Si nous utilisons directement le composant Vue pour développer la page sans traiter la fermeture de la fenêtre, l'utilisateur risque de ne rencontrer aucune invite lors de la fermeture, ce qui affecte l'expérience utilisateur.

Pour résoudre ce problème, nous devons ajouter une invite de fermeture de fenêtre dans Vue. Ensuite, nous présenterons comment implémenter une invite contextuelle de fermeture de fenêtre dans Vue.

1. Ajouter la surveillance des événements de fermeture de fenêtre

Dans le composant Vue, nous devons d'abord ajouter la surveillance des événements de fermeture de fenêtre via la fonction hook montée, comme indiqué ci-dessous : mounted钩子函数添加窗口关闭事件的监听，如下所示：

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

其中，beforeunload事件是在窗口即将关闭时触发的。在事件处理函数handleWindowClose中，我们可以进行相应的提示处理。

二、处理窗口关闭提示

在事件处理函数中，可以根据需要制定不同的提示处理。例如，用户在编辑表单时，如果窗口关闭，则需要询问是否保存修改。我们可以使用window.confirm弹出对话框，代码如下：

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

在上述代码中，formIsDirty、saveForm为自定义的函数，用于判断表单是否被修改过，并进行保存。event.preventDefault()和event.returnValue = ''则用于阻止系统默认的窗口关闭行为，以保证当前的提示框可以正常弹出。

除了确认保存修改，我们还可以增加其他的提示内容。例如，在有未保存的数据时，提示用户是否确认离开页面。代码如下：

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

在上述代码中，我们不做任何处理直接关闭窗口，用户需要手动保存数据。

除此之外，我们还可以使用自定义的提示框，来提供更加友好的提示内容。例如，使用Vue插件vue-snotify，可以实现类似于弹幕的提示框。代码如下：

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()}
      ]
    })
  }
}

在上述代码中，我们引入了vue-snotify插件，并在处理函数中调用了this.$snotify.confirmrrreee

Parmi eux, beforeunload L'événement est déclenché lorsque la fenêtre est sur le point de se fermer. Dans la fonction de traitement d'événements handleWindowClose, nous pouvons effectuer le traitement d'invite correspondant.

2. Traitement des invites de fermeture de la fenêtre

Dans la fonction de traitement des événements, vous pouvez formuler différents traitements d'invite en fonction des besoins. Par exemple, lorsque l'utilisateur modifie un formulaire, si la fenêtre est fermée, il faut lui demander s'il doit enregistrer les modifications. Nous pouvons utiliser window.confirm pour faire apparaître une boîte de dialogue :

rrreee

Dans le code ci-dessus, formIsDirty et saveForm sont des fonctions personnalisées, utilisées pour déterminer si le formulaire a été modifié et le sauvegarder. <code>event.preventDefault() et event.returnValue = '' sont utilisés pour empêcher le comportement de fermeture de fenêtre par défaut du système afin de garantir que la boîte d'invite actuelle puisse apparaître normalement. 🎜🎜En plus de confirmer l'enregistrement des modifications, nous pouvons également ajouter d'autres invites. Par exemple, lorsqu'il existe des données non enregistrées, l'utilisateur est invité à confirmer s'il souhaite quitter la page. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, on ferme la fenêtre directement sans effectuer aucun traitement, et l'utilisateur doit sauvegarder les données manuellement. 🎜🎜De plus, nous pouvons également utiliser des boîtes d'invite personnalisées pour fournir un contenu d'invite plus convivial. Par exemple, en utilisant le plug-in Vue vue-snotify, vous pouvez implémenter une boîte de dialogue similaire à un barrage. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons introduit le plug-in vue-snotify et appelé la méthode this.$snotify.confirm dans le traitement fonction pour faire apparaître une boîte de confirmation personnalisée. Le framework fournit une multitude d'éléments de configuration qui peuvent être configurés en fonction des conditions réelles. 🎜🎜Résumé🎜🎜Ce qui précède explique comment implémenter l'invite contextuelle de fermeture de fenêtre dans Vue. En ajoutant un écouteur pour l'événement de fermeture de fenêtre et en effectuant un traitement d'invite correspondant dans la fonction de traitement d'événement, l'expérience utilisateur de l'application Web peut être améliorée. 🎜🎜Bien sûr, pour certains besoins particuliers, nous pouvons également personnaliser le style de l'invite de fermeture de la fenêtre et enregistrer les opérations inachevées via Ajax et d'autres méthodes pour obtenir une expérience d'invite utilisateur plus avancée. 🎜

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!