天天看点

vue移动端开发记录

添加遮罩及设置页面不能修改

添加遮罩后,不能完全遮住button这类元素的颜色,页面仍然可用。

想了很多办法,最后决定用Antd的加载中组件。

使用该组件使得页面不可用,之后再修改样式。

vue中setTimeout函数中this指向问题

这个问题困了我几乎两个小时,一直没转过弯来,最后终于想通了,发现其实不难。记录一下,说不定之后面试会问有没有遇到什么难题,如何解决的,有什么收获。

  1. 错误示范:
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

思考:这次是我粗心大意造成的,实际的解决方法不难,不过我也想了很多方法,只是由于很心急,很多想的方法都没有去深入探索,放弃那些方法并不是遇到无法解决的问题,而是我觉得太麻烦应该不需要花那么大的代价才对,所以没有继续深究。