よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。
ページを閉じるときに出るこんなのや
戻るや別のページに移動しようとするときに出るこんなの
ソースコード
中身はこんな感じ。Mixinで実装してるけど、pageでもOK。
ページを閉じるときと、ページを移動するときとで処理が異なり、
- ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング
- ページを移動するとき ... vue-routerのbeforeRouteLeaveでハンドリング
という感じになる。
なにも編集してないときに出るのが嫌なので、
isBlockUnload
というフラグを使って制御できるようにしてる。
import Vue from "vue"; import Component from "vue-class-component"; @Component export default class BlockUnloadMixin extends Vue { // 表示するメッセージ protected blockUnloadMessage = "編集した内容が消えちゃうけど、移動する?"; // アラートを出すかのフラグ protected isBlockUnload: boolean = false; // **************************** // * ページを閉じるときの処理: beforeunloadイベント // **************************** created() { if (process.client) { // 作成時にイベントリスナーに登録 window.addEventListener("beforeunload", this.checkWindow); } } beforeDestroy() { // 破棄される前にイベントリスナーから削除 window.removeEventListener("beforeunload", this.checkWindow); } // 実際の処理 protected checkWindow(event: BeforeUnloadEvent) { if (!!this.isBlockUnload) { // unloadをキャンセルして、メッセージを表示 event.preventDefault(); event.returnValue = this.blockUnloadMessage; } } // **************************** // * ページを移動するときの処理: v-router // **************************** beforeRouteLeave(to, from, next) { if (!!this.isBlockUnload) { // アラートダイアログを表示して、結果に応じて遷移 const msg = this.blockUnloadMessage; const answer = window.confirm(msg); next(answer); } else { // next()は必ず呼び出さないといけない next(); } } }
Mixinsを使う例
使うときはこんな感じ。
<template> <div><!-- 略... --></div> </template> <script lang="ts"> import { Component, Vue, mixins } from "nuxt-property-decorator"; // minins import BlockUnloadMixin from "~/mixins/BlockUnloadMixin"; // ※ mixinsでBlockUnloadMixinを追加 @Component export default class CreateMap extends mixins(BlockUnloadMixin) { // なんかあたりが更新されるときによばれるなにか private changeValue(val: string) { // 略... // ※ 変更があったら、アラートを出すフラグをONにする this.isBlockUnload = true; } } </script>
以上!!
へんあいマップをリリースしました!
「偏愛マップ」を簡単に作れるWebアプリです!
偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、 勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも!
よかったら遊んでみてください(´ω`)