技术问答vue濡備綍鐩戝惉绐楀彛楂樺害 - 扬州沐宇科技

鍦╲ue涓洃鍚獥鍙ｉ珮搴︾殑鏂规硶锛?.鏂板缓椤圭洰锛屽紩鍏ue锛?.瀹氫箟data鍊硷紝璁板綍绐楀彛楂樺害锛?.浣跨敤window.onresize鑾峰彇绐楀彛楂樺害锛?.浣跨敤watch鏂规硶瀹炴椂鐩戝惉绐楀彛楂樺害锛?p>

vue濡備綍鐩戝惉绐楀彛楂樺害

鍏蜂綋姝ラ濡備笅锛?p>1.棣栧厛锛屾柊寤轰竴涓猦tml椤圭洰锛屽苟鍦ㄩ」鐩腑寮曞叆vue锛?p>

import Vue from 'vue'

2.寮曞叆vue鍚庯紝鍦ㄩ」鐩腑瀹氫箟涓€涓猟ata鍊硷紝鐢ㄤ簬璁板綍绐楀彛楂樺害锛?p>

data(){
return{
clientHeight:'',
}
}

3.data鍊煎畾涔夊ソ鍚庯紝浣跨敤window.onresize鏂规硶鑾峰彇绐楀彛楂樺害锛?p>

mounted(){
this.clientHeight = `${document.documentElement.clientHeight}`;
let that = this;
window.onresize = function(){
this.clientHeight = `${document.documentElement.clientHeight}`;
if(that.$refs.page){
that.$refs.page.style.minHeight = clientHeight - 100 + 'px';
}
}
}

4.鏈€鍚庯紝鑾峰彇鍒扮獥鍙ｉ珮搴﹀悗锛屼娇鐢╳atch鏂规硶鍗冲彲瀹炴椂鐩戝惉绐楀彛楂樺害锛?p>

watch:{
clientHeight(){ 
this.changeFixed(this.clientHeight) 
}
}