Vue でウィンドウを閉じるポップアップ プロンプトを実装する方法

フロントエンド テクノロジの継続的な開発と適用により、Vue はますます多くのフロントエンド エンジニアの最初の選択肢となりました。ただし、Vue を使用してページを開発するプロセスにおいて、適切なプロンプトがないと、ユーザーに不快な体験を与える可能性があります。

Web アプリケーションでは、ユーザーがブラウザの閉じるボタンを押す、ブラウザのショートカット キーを押す、プロセスを終了するなど、さまざまな状況でウィンドウを閉じることができます。ウィンドウを閉じる処理を行わずに Vue コンポーネントを直接使用してページを開発すると、閉じるときにプロンプ​​トが表示されず、ユーザー エクスペリエンスに影響を与える可能性があります。

この問題を解決するには、Vue にウィンドウを閉じるプロンプトを追加する必要があります。次に、Vue でウィンドウを閉じるポップアップ プロンプトを実装する方法を紹介します。

1. ウィンドウを閉じるイベント リスナーを追加する

Vue コンポーネントでは、次に示すように、まず mounted フック関数を通じてウィンドウを閉じるイベント リスナーを追加する必要があります。 :

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

このうち、beforeunload イベントは、ウィンドウが閉じようとしているときにトリガーされます。イベント処理関数 handleWindowClose では、対応するプロンプト処理を実行できます。

2. ウィンドウ終了プロンプトの処理

イベント処理機能では、必要に応じてさまざまなプロンプト処理を構築できます。たとえば、ユーザーがフォームを編集しているときにウィンドウが閉じている場合、変更を保存するかどうかを尋ねる必要があります。 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.confirm メソッドを呼び出しました。処理関数を使用して、カスタム確認ボックスをポップアップ表示します。フレームワークには、実情に合わせて設定できる豊富な設定項目が用意されています。

概要

上記は、Vue でウィンドウを閉じるポップアップ プロンプトを実装する方法です。ウィンドウを閉じるイベントのリスナーを追加し、イベント処理関数で対応するプロンプト処理を実行することで、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。

もちろん、特別なニーズがある場合は、ウィンドウを閉じるプロンプトのスタイルをカスタマイズし、Ajax やその他の方法で未完了の操作を保存して、より高度なユーザー プロンプト エクスペリエンスを実現することもできます。

以上がVue でウィンドウを閉じるポップアップ プロンプトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。