vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize&

 1 1.浏览器尺寸变化响应事件 ：
 2 
 3 Js代码  收藏代码
 4 window.onresize = function(){....}    
 5  
 6 
 7   获取变更后参数：
 8 
 9  
10 
11 Js代码  收藏代码
12 // 获取到的是变更后的页面宽度    
13 var currentWidth = document.body.clientWidth;     
14   这里需要注意的是，onresize响应事件处理中，因为已经刷新页面，所以获取到的页面尺寸参数是变更后的参数。
15 
16  
17 
18   如果需要使用到变更之前的参数，需要建一个全局变量保存之前的参数（并且记得在onresize事件中刷新这个全局变量保存新的参数值）。

 1 2.谷歌浏览器中  window.onresize 事件默认会执行两次（偶尔也会只执行一次，网上大部分说法认为这是Chrome的bug）。 
 2 
 3   解决方法：（为resize设置一个延迟）一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次，代码如下：
 4 
 5  
 6 
 7 Js代码  收藏代码
 8 var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制    
 9     
10 window.onresize = function()    
11 {    
12  if (firstOnResizeFire) {    
13   NfLayout.tabScrollerMenuAdjust(homePageWidth);    
14   firstOnResizeFire = false;    
15       
16   //0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）    
17   setTimeout(function() {    
18    firstOnResizeFire = true;    
19         }, 500);    
20  }    
21      
22  homePageWidth = document.body.clientWidth; //重新保存一下新宽度    
23 }    
24  
25 
26  
27 
28 例子：
29 
30 监听屏幕的改变：
31 
32 Html代码  收藏代码
33   
34   
35"en">  
36     "UTF-8">  
37     38     "viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">  
39     "telephone=no" name="format-detection">  
40   
41   
42 "show">  
43 51   
52   

 1 2 .监听div大小的改变
 2 
 3  
 4 
 5 Html代码  收藏代码
 6   
 7   
 8 "en">  
 9     "UTF-8">  
10     11   
12   
13 
"show_div" style="background-color: lightblue;width: 100%;height: 300px;">
  
14 "show">  
15 24   
25