vue监听页面窗口变化

获取窗口宽度：document.body.clientWidth
监听窗口变化：window.onresize

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

我们将document.body.clientWidth赋值给data中自定义的变量：

data:{
    screenWidth: document.body.clientWidth
}

在页面mounted时，挂载window.onresize方法：

mounted () {
    const that = this
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
}

监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：

watch:{
    screenWidth(val){
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if(!this.timer){
            // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
            this.screenWidth = val
            this.timer = true
            let that = this
            setTimeout(function(){
                // 打印screenWidth变化的值
                console.log(that.screenWidth)
                that.timer = false
            },400)
        }
    }
}

好！既然可以监听到窗口screenWidth值的变化，就可以根据这个值设定不同的自适应方案了！

上篇文章 展开收起屏幕切换就可以使用昂

 watch: {
    screenWidth(val) {
      setTimeout(() => {
        this.isShowLive = false;
        setTimeout(() => {
          this.isShowLive = true;
        }, 10);
      }, 400);
    },
  },