vue中進行窗口變化的監聽

今天vue項目中用到的元素的寬度依賴與窗口的寬度，所以在進行寬度設置的時候涉及到窗口的變化，因為元素的寬度要隨着窗口變化

 

分成幾個步驟來實現這一過程

1、首先元素的寬度依賴與窗口的寬度，就需要有接受窗口寬度的變量

　　在data中設置：

screenWidth: document.documentElement.clientWidth,//屏幕寬度

2、窗口變化的時候需要及時的更新變量的值

　　在mounted中設置監聽窗口變化的監聽事件

window.addEventListener('resize',function(){
        that.screenWidth = document.body.offsetWidth;
    })

3、頁面加載的時候要給元素賦值寬度

　　在mounted中根據窗口寬度設置元素寬度

document.getElementById('topbar').style.width = this.screenWidth-260 + 'px'//260是元素和窗口的差值，可以根據需要調整

4、監聽窗口的變化

watch:{
    screenWidth:function(val){
      console.log(val)
      document.getElementById('topbar').style.width = Number(val)-260 + 'px'
    }
  },