离开编辑页面二次提示mixins

原文地址
edit-page-leave-prompt.js

/*
/**
 * 编辑页面离开提示
 * EditPageLeavePrompt
 *
 * 在使用页面中写入方法 getIsEdited
 */

import { Dialog } from 'vant'
export default {
  methods: {
    /**
     * 接口、获取当前是否已经编辑过的
     * @interface
     */
    getIsEdited() { },
    _beforeunloadHandler(event) {
      const isEdit = this.getIsEdited && this.getIsEdited()
      if (isEdit) {
        event.preventDefault()
        // Chrome requires returnValue to be set.
        event.returnValue = '您在页面编辑了未保存，是否确认离开'
        return '您在页面编辑了未保存，是否确认离开'
      }
    }
  },

  mounted() {
    if (process.env.NODE_ENV !== 'production') {
      if (typeof this.getIsEdited !== 'function') {
        console.warn('tips: 使用 EditPageLeavePrompt 要有 this.getIsEdited 方法')
      }
    }

    window.addEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeDestroy() {
    window.removeEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeRouteLeave(to, form, next) {
    const isEdit = this.getIsEdited && this.getIsEdited()

    if (isEdit) {
      // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
      // 页面没有变，但是地址已经变了
      setTimeout(() => {
        Dialog({
          title: '提示',
          message: '您在页面编辑了未保存，是否确认离开',
          showCancelButton: true,
          dangerouslyUseHTMLString: true,
          // type: 'warning',
          confirmButtonText: '继续编辑',
          cancelButtonText: '离开'
        })
          .then(() => {
            // 如果取消跳转地址栏会变化，这时保持地址栏不变
            next(false)
          })
          .catch(() => {
            // 正常跳转
            next()
          })
      }, 100)
    } else {
      next()
    }
  }
}

页面引入

import editPageLeavePrompt from '@/mixins/edit-page-leave-prompt.js'
export default {
  mixins: [editPageLeavePrompt],
  data() {
    return {
         dataForm: {},
         dataFormStore: {}
    }
  },
  methods: {
    /**
     * 获取当前是否已经编辑过的
     * @implements
     */
    getIsEdited() {
      return JSON.stringify(this.dataFormStore) !== JSON.stringify(this.dataForm)
    }
  }
}