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. tensorflow 模型权重导出

    tensorflow在保存权重模型时多使用tf.train.Saver().save 函数进行权重保存,保存的ckpt文件无法直接打开,不利于将模型权重导入到其他框架使用(如Caffe.Keras等) ...

  2. python--基本类型之元组

    tuple(元组): 定义和创建和作用: 元组--只读列表,只可以被查询,不能被修改.所以,列表的切片操作同样适用与元组. 元组写在小括号(())里,元素之间用逗号隔开. 虽然元组的元素不可改变,但他 ...

  3. 20155224 《实验二 Java面向对象程序设计》实验报告

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 没有Linux ...

  4. 20155227 《Java程序设计》实验四 Android开发基础设计实验报告

    20155227 <Java程序设计>实验四 Android开发基础设计实验报告 任务一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二 ...

  5. 20155236 2016-2017-2 《Java程序设计》第三周学习总结

    20155236 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 1.在原始码中只能有一个公开类,且主文档名必须与公开类名称相同:其实只要有一个类定义,就会产 ...

  6. JavaScript之数组的常用操作函数

    js对数组的操作非常频繁,但是每次用到的时候都会被搞混,都需要去查相关API,感觉这样很浪费时间.为了加深印象,所以整理一下对数组的相关操作. 常用的函数 concat() 连接两个或更多的数组,并返 ...

  7. 【转载】OGRE中用到的设计模式

    原文:OGRE中用到的设计模式 1.       单例模式(Singleton) 2.       工厂方法(Factory Method)  3.       适配器模式(Adapter)  4.  ...

  8. 安装centos minimal 版本后的网络配置(linux)

    1.修改网卡配置文件 2.重启网络服务 3.测试网络

  9. ES6中的promise

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形 ...

  10. Python接口测试实战5(下) - RESTful、Web Service及Mock Server

    如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...