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

思考：這次是我粗心大意造成的，實際的解決方法不難，不過我也想了很多方法，隻是由于很心急，很多想的方法都沒有去深入探索，放棄那些方法并不是遇到無法解決的問題，而是我覺得太麻煩應該不需要花那麼大的代價才對，是以沒有繼續深究。