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

hahahu
  • 10

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

回复
阅读 33k
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`;
    };
},

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏