在我使用Vue的移动web应用程序中，我想在软键盘弹出时隐藏我的页脚.所以我有一个小函数来测试窗高和窗宽的比率...
showFooter(){
return h / w > 1.2 || h > 560;
}
...我向你宣布.内部高度/窗口.在我的数据里.
data: { h: window.innerHeight, w: window.innerWidth }
问题是，当windows 打开时.innerHeight更改后，我的h属性不会获得新值.我怎么能看windows .内高？
我相信有更好的方法可以做到这一点，但在我想出办法之前，这一种方法会对你有用:
基本上，你只需要一个数据props 和一个观察者就可以做到这一点.
new Vue({
el: '#app',
data() {
return {
windowHeight: window.innerHeight,
txt: ''
}
},
watch: {
windowHeight(newHeight, oldHeight) {
this.txt = `it changed to ${newHeight} from ${oldHeight}`;
}
},
mounted() {
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
})
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize);
},
methods: {
onResize() {
this.windowHeight = window.innerHeight
}
}
});
这将输出更改
<div id="app">
<br> Window height: {{ windowHeight }} <br/>
{{ txt }}
</div>