各位大神,vue怎么检测窗口的大小变动

需求:窗口改变的时候,在组件中能监控到窗口的变化,从而改变控件的大小

阅读 31.1k
评论
    4 个回答

    window.addEventListener('resize', handler)

      比如你设置了一个背景图和浏览器窗口相同高度.
      可以这么做.

      data(){
          return {
              clientHeight: '600px',
          },
      },
      mounted() {
          // 动态设置背景图的高度为浏览器可视区域高度
          
          // 首先在Virtual DOM渲染数据时,设置下背景图的高度.
          this.clientHeight.height = `${document.documentElement.clientHeight}px`;
          // 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度.
          const that = this;
          window.onresize = function temp() {
              that.clientHeight = `${document.documentElement.clientHeight}px`;
          };
      },
        • 1.1k

        在组件mounted的时候给窗口增加监听resize的事件.

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章