vue动态监听窗口高度 - 全背景banner

• 参考项目文件 src/hr/index.vue 【结合下文：第一种方法】

第一种方法：【本文手写代码】

data() {
      return {
        screenHeight: document.body.clientHeight, // 当前浏览器窗口高度
      };
},
mounted(){
	// banner高度重置
      this.resetHeight();      
      $(window).resize(function(){
      	this.resetHeight();      
   /*
		var windowsHeight = $(window).height();
        $('.bannerWrap').height(windowsHeight);
        this.screenHeight = windowsHeight;
        // console.log(this.screenHeight);
	*/
      });
},

methods: {
	// banner高度重置
      resetHeight:function(){
        var windowsHeight = $(window).height();
        $('.bannerWrap').height(windowsHeight);
        this.screenHeight = windowsHeight;
        // console.log(this.screenHeight);
      },
      
}

• 参考地址：https://hacpai.com/article/1534819192805

第二种方法：

1. 在 data 中去 定义 一个记录宽度是 属性

data: {
    return {
       screenWidth: document.body.clientWidth      // 设置默认值
    }
}

2. 在 vue mounted 的时候 去挂载一下 window.onresize 方法

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

3. watch去监听这个 属性值的变化，如果发生变化则讲这个val传递给this.screenWidth

watch: {
          screenWidth (val) {
              this.screenWidth = val
          }
      }

4. 优化因为频繁触 resize函数，导致页面卡顿的问题

watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenWidth)
                        that.init()
                        that.timer = false
                    }, 400)
                }
            }
        }

第三种方法：（推荐使用）:

原理：在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。

data(){
    return {
        clientHeight: document.body.clientHeight,
    },
},
mounted() {
    // 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．
    this.clientHeight = document.body.clientHeight;
    // 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
    const _this = this;
    window.onresize = function temp() {
        _this.clientHeight = document.body.clientHeight;
    };
},

作者：chenxc
链接：https://hacpai.com/article/1534819192805
来源：黑客派
协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/

以上就是关于" vue动态监听窗口高度 - 全背景banner "的全部内容。