mixins.ts

 import { Vue, Component, Watch } from "vue-property-decorator"
Component.registerHooks([
'beforeRouteLeave'
])
@Component
/* 此mixin用来页面离开时编辑提示,
如果组件引入该mixin,那么默认:url改变或者刷新关闭时会给出提示;
如果引入的组件更改url时不需要提示(比如点击保存按钮时),那么需要将showLeaveHint手动置为false */
export class LeaveHintMixin extends Vue {
showLeaveHint: boolean = true;
hintMessage: string = '页面中有正在编辑的内容,继续将不会保存'; /* ---- 函数 ---- */
showLeaveHintFun(next) {
if (window.confirm(this.hintMessage)) {
next();
} else {
next(false);
}
} /* 绑定与解绑浏览器刷新关闭事件 */
bindBeforeunload() {
// 点击刷新、关闭按钮,直接通过浏览器给出提示
window.onbeforeunload = (event) => {
event.returnValue = this.hintMessage;
return this.hintMessage;
};
}
unbindBeforeunload() {
window.onbeforeunload = null;
} /* ---- 生命周期 ---- */
// 改变url时,给出提示
beforeRouteLeave(to, from, next) {
if (this.showLeaveHint) {
this.showLeaveHintFun(next);
} else {
next();
}
}
// 组件渲染完绑定浏览器刷新关闭事件
mounted() {
if (this.showLeaveHint) {
this.bindBeforeunload();
}
}
// 组件摧毁时解绑事件
beforeDestroy() {
this.unbindBeforeunload();
} // 添加监控使得组件能够更加灵活控制编辑提示,组件改变showLeaveHint时,便可以绑定或者解绑事件控制提示
@Watch('showLeaveHint')
bindClick(val) {
if (val) {
this.bindBeforeunload();
} else {
this.unbindBeforeunload();
}
}
}

使用方法 use.ts

 import { Vue, Watch, Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { LeaveHintMixin } from '../../common/mixins' @Component export default class Use extends mixins(LeaveHintMixin) {
//引入mixins.ts默认更改url、刷新、关闭时会给出提示 showLeaveHint = false; // 这样会覆盖mixins.ts中的showLeaveHint,会改为默认没提示,跟不引入一样 //后面通过改变this.showLeaveHint 可以控制更改url、刷新、关闭时是否给出提示
}

使用vue的mixins混入实现对正在编辑的页面离开时提示的更多相关文章

  1. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  2. Vue mixins(混入)

    建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...

  3. _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

    _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

  4. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  5. Mixins 混入选项操作

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  6. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  7. vue中mixins的使用方法和注意点(详)

    mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...

  8. Vue中mixins、extends、extend和components的作用和区别

    关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...

  9. mixins混入

    mixins混入:定义类,多重继承 使用方法见附件: mixins混入.zip    

随机推荐

  1. 20155305 2016-2017-2 《Java程序设计》 实验五 Java网络编程及安全实验报告

    20155305 2016-2017-2 <Java程序设计> 实验五 Java网络编程及安全实验报告 实验内容 1.掌握Socket程序的编写. 2.掌握密码技术的使用. 3.设计安全传 ...

  2. PostgreSQL的checkpoint能否并行

    对于此问题,在社区进行了提问,并得到了一些大牛的解答: http://postgresql.1045698.n5.nabble.com/Can-checkpoint-creation-be-paral ...

  3. [BZOJ1185][HNOI2007]最小矩形覆盖-[凸包+旋转卡壳]

    Description 传送门 Solution 感性理解一下,最小矩形一定是由一条边和凸包上的边重合的. 然后它就是模板题了..然而真的好难调,小于大于动不动就打错. Code #include&l ...

  4. 人脸识别引擎SeetaFaceEngine中Detection模块使用的测试代码

    人脸识别引擎SeetaFaceEngine中Detection模块用于人脸检测,以下是测试代码: int test_detection() { std::vector<std::string&g ...

  5. DSP5509项目之用FFT识别钢琴音调(5)之开始傅里叶变换

    1. 首先电脑上下载一个音频模拟的软件 2. 研究下钢琴的声音范围27HZ到4000HZ,那么采样频率需要是信号的两倍频率以上,所以建议采样频率是16KHZ.先看一下采集到的数据,如下是空载时候采集到 ...

  6. 博弈论(Game Theory) - 04 - 纳什均衡

    博弈论(Game Theory) - 04 - 纳什均衡 开始 纳什均衡和最大最小定理是博弈论的两大基石. 博弈不仅仅是对抗,也包括合作和迁就,纳什均衡能够解决这些问题,提供了在数学上一个完美的理论. ...

  7. 纯CSS3实现旋转木马

    test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  8. katalon系列十二:自动化上传文件、下载文件

    一.下载文件1.下载文件时,需要先设置好Chrome/Firefox下载路径.不弹出下载框等,大家先学习下在selenium下如何设置:https://www.cnblogs.com/fnng/p/7 ...

  9. datax 执行流程分析

    https://www.jianshu.com/nb/29319571 https://www.jianshu.com/p/b10fbdee7e56

  10. ES6的新特性(7)——函数的扩展

    函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console ...