如何在Vue中使用窗口大小？(如何检测软键盘？)
如何在Vue中使用窗口大小？(如何检测软键盘？)
提问于 2017-11-10 17:15:15
在我的带有Vue的移动web应用程序中，当软键盘弹出时，我想隐藏我的页脚。所以我有一个小函数来测试窗口高度和窗口宽度的比率。
showFooter(){
return h / w > 1.2 || h > 560;
}...and我在我的数据中声明window.innerHeight/window.innerWidth。
data: { h: window.innerHeight, w: window.innerWidth }问题是，当window.innerHeight发生变化时，我的h属性不会获得新值。如何观看window.innerHeight？
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-11-10 17:51:31
我相信有更好的方法可以做到这一点，但在我想出一些方法之前，这个方法对你是有效的：
基本上，你只需要一个数据支柱和一个观察者就可以做到这一点。
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>Stack Overflow用户
发布于 2020-03-30 20:48:33
上面的答案对我不起作用。相反，我使用：
mounted() {
window.addEventListener('resize', () => {
this.windowHeight = window.innerHeight
})
}Stack Overflow用户
发布于 2020-08-24 09:23:30
对于那些已经在使用Vuetify的用户，您可以只观看this.$vuetify.breakpoint.width或this.$vuetify.breakpoint.height来查看视口尺寸的变化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47219272
复制相关文章
相似问题