使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts
1 import { Vue, Component, Watch } from "vue-property-decorator" 2 Component.registerHooks([ 3 'beforeRouteLeave' 4 ]) 5 @Component 6 /* 此mixin用来页面离开时编辑提示, 7 如果组件引入该mixin,那么默认:url改变或者刷新关闭时会给出提示; 8 如果引入的组件更改url时不需要提示(比如点击保存按钮时),那么需要将showLeaveHint手动置为false */ 9 export class LeaveHintMixin extends Vue { 10 showLeaveHint: boolean = true; 11 hintMessage: string = '页面中有正在编辑的内容,继续将不会保存'; 12 13 /* ---- 函数 ---- */ 14 showLeaveHintFun(next) { 15 if (window.confirm(this.hintMessage)) { 16 next(); 17 } else { 18 next(false); 19 } 20 } 21 22 /* 绑定与解绑浏览器刷新关闭事件 */ 23 bindBeforeunload() { 24 // 点击刷新、关闭按钮,直接通过浏览器给出提示 25 window.onbeforeunload = (event) => { 26 event.returnValue = this.hintMessage; 27 return this.hintMessage; 28 }; 29 } 30 unbindBeforeunload() { 31 window.onbeforeunload = null; 32 } 33 34 /* ---- 生命周期 ---- */ 35 // 改变url时,给出提示 36 beforeRouteLeave(to, from, next) { 37 if (this.showLeaveHint) { 38 this.showLeaveHintFun(next); 39 } else { 40 next(); 41 } 42 } 43 // 组件渲染完绑定浏览器刷新关闭事件 44 mounted() { 45 if (this.showLeaveHint) { 46 this.bindBeforeunload(); 47 } 48 } 49 // 组件摧毁时解绑事件 50 beforeDestroy() { 51 this.unbindBeforeunload(); 52 } 53 54 // 添加监控使得组件能够更加灵活控制编辑提示,组件改变showLeaveHint时,便可以绑定或者解绑事件控制提示 55 @Watch('showLeaveHint') 56 bindClick(val) { 57 if (val) { 58 this.bindBeforeunload(); 59 } else { 60 this.unbindBeforeunload(); 61 } 62 } 63 }
View Code
使用方法 use.ts
1 import { Vue, Watch, Component } from 'vue-property-decorator' 2 import { mixins } from 'vue-class-component' 3 import { LeaveHintMixin } from '../../common/mixins' 4 5 @Component 6 7 export default class Use extends mixins(LeaveHintMixin) { 8 //引入mixins.ts默认更改url、刷新、关闭时会给出提示 9 10 showLeaveHint = false; // 这样会覆盖mixins.ts中的showLeaveHint,会改为默认没提示,跟不引入一样 11 12 //后面通过改变this.showLeaveHint 可以控制更改url、刷新、关闭时是否给出提示 13 }
View Code
转载于:https://www.cnblogs.com/XHappyness/p/9935504.html
使用vue的mixins混入实现对正在编辑的页面离开时提示相关推荐
- Vue 一秒搞懂mixins混入
在项目开发过程中,你是否会遇到此类问题:在多个组件中用到相同的方法.如果遇到此类问题,那么在多个组件中重复写同样的方法会显得非常繁琐,代码也会不好维护.就此,Vue提供了一个mixins混入的一个概念 ...
- Vue中使用mixins混入
mixins在Vue中的用法 一.mixins混入 混入(mixins)提供了一种非常灵活的方式,来分发vue组件中的可服用功能.一个混入对象可以包含任意的组件选项(vue在script的部分).当组 ...
- vue 往对象中添加键值对_【Vue】Vue学习之混入
今天学习了Vue中的"混入"知识点,写篇文章用自己的语言来向自己解释它,如有不足还望指点. 混入(mixins): 混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能 - ...
- vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
- vue 中 mixins 的使用
本文同步发布在:vue 中 mixins 的使用 mixins(混入)就是定义了一部分公共的方法.计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用.下面我们具体来看看怎么使 ...
- 【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
- TypeScript Mixins 混入
简介 TS 中Mixins混入类是与vue中的mixins混入语法,简单来说也是对多个对象,类等的合并. 参考:https://www.tslang.cn/docs/handbook/mixins.h ...
- Vue学习之混入(Mixin)
Vue学习之混入 文章目录 Vue学习之混入 一.什么是混入? 二.注册混入 三.使用混入 1. 局部混入 2.全局混入 四.混入的规则 总结 一.什么是混入? 混入 (mixin) 提供了一种非常灵 ...
- vue中Mixins 与 Hoc
什么是mixins 在官方文档中 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
最新文章
- BZOJ 2818 Gcd 线性欧拉筛(Eratosthenes银幕)
- paip. 提升性能---hibernate的缓存使用 总结
- php回调函数原理和实例
- 2017-2018-1 20155336 《信息安全系统设计基础》第八周课堂测试
- CF1415D:XOR-gun(异或)
- php 条码打印控件,jQuery插件jquery-barcode实现条码打印的方法
- hdu-5992 Finding Hotels(kd-tree)
- Check Point截获JavaScript文件隐形攻击
- java8 merge_给老弟讲解java8中的marge()方法,一顿骚操作
- 在线扒站复活版可预览网站html源码
- wget 下载文件出错
- 计算机VFP基础知识,计算机二级《VFP》考试基础知识:VisualFoxPro基础
- 计算机论文 指导老师评语,毕业设计指导老师评语(精选5篇)
- hp服务器修改bios设置,HP 服务器进入BIOS 按键总结
- 腾讯bugly接入详解
- GPLv2许可证正经人话翻译
- icc校色文件使用教程_Windows7色彩管理显示器ICC设置方法
- 接口 和 http协议
- 流媒体加速服务的详细讲解
- 大企业的计算机设备维护,企业计算机系统维护措施
热门文章
- 怎么判断几行_日语高考作文该怎么写,和汉语作文一样吗?
- java7 离线_java7 64位
- ios 裁剪圆形头像_iOS开发笔记:实现圆形头像
- matlab单元刚度矩阵整合成整刚,求结构总刚矩阵Matlab源代码
- 农大计算机学院姜新华,计算机学院红帽学院揭牌仪式
- 算一串数字的entropy_2020520|一个万年一遇有爱的日子,网友:就是一串数字
- 【 Notes 】Categories of Wireless Local Positioning Systems
- 全链路压测自动化实践
- 国家航天局:中国空间站预计到2022年前后建成
- Tomcat安装之在Mac环境下配置tomcat9