くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ

よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。

ページを閉じるときに出るこんなのや

f:id:wannabe-jellyfish:20200219154137p:plain

戻るや別のページに移動しようとするときに出るこんなの

f:id:wannabe-jellyfish:20200219154149p:plain

ソースコード

中身はこんな感じ。Mixinで実装してるけど、pageでもOK。

ページを閉じるときと、ページを移動するときとで処理が異なり、

  1. ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング
  2. ページを移動するとき ... 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アプリです!

f:id:wannabe-jellyfish:20200219154406p:plain

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、 勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも!

よかったら遊んでみてください(´ω`)

好きを集めた自己紹介マップ|へんあいマップ

参考にしたサイト様