需求
当页面中的数据发生改变时,刷新页面弹出警告框,提醒用户有未保存的数据,是否依然刷新。
要做的很简单,就是onbeforeunload这个函数在刷新页面时会自动触发一个弹窗,在普通页面中直接写在body中就完事。
在单页面应用中,这里我有判断的要求,数据变动时刷新才显示这个弹窗提醒,所以这个函数写在mounted中并不合适。input框中数据改变并不会让mountd中的该数据改变,所以要做的就是监听(很不想用,浪费性能)
封装 onbeforeunload
function onbeforeunload(target, path) {
window.onbeforeunload = function(e) {
if (target.$route.fullPath === path) {
// 兼容IE8和Firefox 4之前的版本
var e = e || window.event
if (e) {
e.returnValue = '关闭提示'
} // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '关闭提示'
} else {
window.onbeforeunload = null
}
}
}
export default onbeforeunload
使用
import Onbeforeunload from '@/utils/onbeforeunload'
export default {
watch: {
disabled: function(e) {
if (!e) { //这里我判断的是按钮是否禁用,当我的数据变化时,按钮是可点击true,当没有数据时是false。满足需求
Onbeforeunload(this, '/edit/post-new')
}
}
}
}
P.S 关于深度监听,跟是否初始化就监听
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true
new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ... },
immediate: true,
deep:true
}
}
})
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
也就是data下绑定了一个对象,你想监听这个对象中的某个属性,这时候就需要将deep置为true了
Comments | NOTHING