vmf/src/mixins/saveReminderMixin.js

vue micro service frame

/**
 * Created by henian.xu on 2020/4/14.
 *
 */

export default {
    data() {
        return {
            isSaveReminder: false,
        };
    },
    async beforeRouteLeave(to, form, next) {
        const { isSaveReminder } = this;
        // console.log(isSaveReminder);
        if (isSaveReminder) {
            this.$confirm(
                this.$$t('vmf_change_tips2', '系统可能不会保存您所做的更改, 是否确定要离开?'),
                this.$$t('vmf_friendly_reminder', '温馨提示'),
                {
                    closeOnHashChange: false,
                    confirmButtonText: this.$$t('vmf_confirm', '确定'),
                    cancelButtonText: this.$$t('vmf_cancel', '取消'),
                    type: 'warning',
                },
            )
                .then(() => {
                    next();
                })
                .catch(() => {
                    next(false);
                });
        } else {
            next();
        }
    },
    computed: {
        formModelChangeListener() {
            const { formModel } = this;
            return formModel;
        },
    },
    watch: {
        formModelChangeListener: {
            handler() {
                this.isSaveReminder = true;
            },
            deep: true,
        },
    },
    methods: {
        beforeUnloadDelegate(e) {
            const { isSaveReminder } = this;
            if (isSaveReminder) {
                // browsers are all a little bit special about this: https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent
                e.preventDefault();
                e.returnValue = isSaveReminder;
            }
        },
    },
    created() {
        window.addEventListener('beforeunload', this.beforeUnloadDelegate);
    },
    beforeDestroy() {
        window.removeEventListener('beforeunload', this.beforeUnloadDelegate);
    },
};