使用vue的mixins混入实现对正在编辑的页面离开时提示
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混入实现对正在编辑的页面离开时提示的更多相关文章
- Vue.js Mixins 混入使用
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...
- Vue mixins(混入)
建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...
- _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
_ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
- Vue混合mixins
前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...
- Mixins 混入选项操作
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- vue中mixins的使用方法和注意点(详)
mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...
- Vue中mixins、extends、extend和components的作用和区别
关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...
- mixins混入
mixins混入:定义类,多重继承 使用方法见附件: mixins混入.zip
随机推荐
- 20155305 2016-2017-2 《Java程序设计》 实验五 Java网络编程及安全实验报告
20155305 2016-2017-2 <Java程序设计> 实验五 Java网络编程及安全实验报告 实验内容 1.掌握Socket程序的编写. 2.掌握密码技术的使用. 3.设计安全传 ...
- PostgreSQL的checkpoint能否并行
对于此问题,在社区进行了提问,并得到了一些大牛的解答: http://postgresql.1045698.n5.nabble.com/Can-checkpoint-creation-be-paral ...
- [BZOJ1185][HNOI2007]最小矩形覆盖-[凸包+旋转卡壳]
Description 传送门 Solution 感性理解一下,最小矩形一定是由一条边和凸包上的边重合的. 然后它就是模板题了..然而真的好难调,小于大于动不动就打错. Code #include&l ...
- 人脸识别引擎SeetaFaceEngine中Detection模块使用的测试代码
人脸识别引擎SeetaFaceEngine中Detection模块用于人脸检测,以下是测试代码: int test_detection() { std::vector<std::string&g ...
- DSP5509项目之用FFT识别钢琴音调(5)之开始傅里叶变换
1. 首先电脑上下载一个音频模拟的软件 2. 研究下钢琴的声音范围27HZ到4000HZ,那么采样频率需要是信号的两倍频率以上,所以建议采样频率是16KHZ.先看一下采集到的数据,如下是空载时候采集到 ...
- 博弈论(Game Theory) - 04 - 纳什均衡
博弈论(Game Theory) - 04 - 纳什均衡 开始 纳什均衡和最大最小定理是博弈论的两大基石. 博弈不仅仅是对抗,也包括合作和迁就,纳什均衡能够解决这些问题,提供了在数学上一个完美的理论. ...
- 纯CSS3实现旋转木马
test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- katalon系列十二:自动化上传文件、下载文件
一.下载文件1.下载文件时,需要先设置好Chrome/Firefox下载路径.不弹出下载框等,大家先学习下在selenium下如何设置:https://www.cnblogs.com/fnng/p/7 ...
- datax 执行流程分析
https://www.jianshu.com/nb/29319571 https://www.jianshu.com/p/b10fbdee7e56
- ES6的新特性(7)——函数的扩展
函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console ...