Vue监听window.resize

最近在开发微信公众号的时候发现了一个安卓兼容性问题。

大家都知道IOS在input框获取焦点的时候会弹起软键盘，点击完成input会自动失去焦点，但是安卓不能。在微信浏览器中会发现给footer添加了position:fixed之后安卓机会出现软键盘将footer顶起的现象。这时我想到的第一解决方案就是监听软键盘事件。

于是我决定通过监听页面的可是高度的变化，控制footer的position属性；代码如下：

首先先定义变量：

data(){
    return{
        clientHeight:""//可视高度
    }
}

其次需要在vue的钩子函数mounted里面去挂载window.onresize方法：

mounted(){
    this.clientHeight = `${document.documentElement.clientHeight}`
    window.onresize = () => {
        this.clientHeight = `${document.documentElement.clientHeight}`
    }
}

最后就是监听clientHeight的变化了：

watch:{
    clientHeight(newvalue,oldvalue){
        if(newvalue < oldvalue){
            //改变footer的定位属性值
            $('footer').css('position','static')
            //或者改变footer的显示与隐藏
            //$('footer').css('display','none')
        }else{
            //改变footer的定位属性值
            $('footer').css('position','fixed')
            //或者改变footer的显示与隐藏
            //$('footer').css('display','block')
        }
    }
}

好了，这样就完美解决。