よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。
ページを閉じるときに出るこんなのや
戻るや別のページに移動しようとするときに出るこんなの
中身はこんな感じ。Mixinで実装してるけど、pageでもOK。
ページを閉じるときと、ページを移動するときとで処理が異なり、
という感じになる。
なにも編集してないときに出るのが嫌なので、
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();
}
}
}
使うときはこんな感じ。
<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アプリです!
偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも!
よかったら遊んでみてください(´ω`)
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント