添加遮罩及设置页面不能修改
添加遮罩后,不能完全遮住button这类元素的颜色,页面仍然可用。
想了很多办法,最后决定用Antd的加载中组件。
使用该组件使得页面不可用,之后再修改样式。
vue中setTimeout函数中this指向问题
这个问题困了我几乎两个小时,一直没转过弯来,最后终于想通了,发现其实不难。记录一下,说不定之后面试会问有没有遇到什么难题,如何解决的,有什么收获。
- 错误示范:
export default{
//其他内容已省略
methods: {
formSubmit(){
this.isReady=false;
setTimeout(function(){
//alert(this.isReady)显示undefined
this.isReady=true;
},1000)
}
}
};
这我是想点击submit之后,将data中的isReady设为false,三秒之后又给它改回去,但是setTimeout中的函数指向了window对象,导致改不了isReady的值。
我就想尽各种办法,让isReady指向window对象下的一个boolean值,再在setTimeout的函数中改变这个值,但是那样并不能直接改变isReady,除非他们绑定在一起。
还尝试不使用setTimeout,自己写一个delay的函数,
或者是在setTimeout函数执行后加一个then方法,
想要改变this的指向就要构建Vue实例,或者使用bind(),
还有就是使用这个,但我没有深究
等等,都没能成功
最后在网上找到一个方法去改变this的指向。
2. 正确示范
export default{
//其他内容已省略
methods: {
formSubmit(){
//alert(this)显示object object
//在最外部,设置一个变量,将其绑定上vue实例
var vm = this;
this.isReady=false;
setTimeout(function(){
//alert(this)显示object window
//alert(vm) 显示object object
vm.isReady=true;
},1000)
}
}
};
在最外部,设置一个变量,将其绑定上vue实例。这个方法我在解决过程中看到过,但是没用对,setTimeout函数里的this我没改成vm。
参考链接:https://www.cnblogs.com/fightjianxian/p/10697056.html
思考:这次是我粗心大意造成的,实际的解决方法不难,不过我也想了很多方法,只是由于很心急,很多想的方法都没有去深入探索,放弃那些方法并不是遇到无法解决的问题,而是我觉得太麻烦应该不需要花那么大的代价才对,所以没有继续深究。