如何在Vue中使用窗口大小？(如何检测软键盘？)

在我的带有Vue的移动Web应用程序中，我想在软键盘弹出时隐藏我的页脚。所以我有一个小函数来测试窗口高度和窗口宽度的比率...

showFooter(){
    return h / w > 1.2 || h > 560;
}

...并且我在数据中声明了window.innerHeight/window.innerWidth。

    data: { h: window.innerHeight, w: window.innerWidth }

问题是，当window.innerHeight更改时，我的h属性没有获得新值。如何观看window.innerHeight？

---

解决方案

我相信还有更好的方法可以做到这一点，但在我想出办法之前，这个方法对您是有效的：

基本上，您只需要一个数据道具和一个观察者即可完成此操作。

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>