Windowing changes in listening vue

The width of the window vue dependence and elements used in the project today, the width is set during the time involved to change the window, because the width of the element to change as the window

 

Divided into several process steps to achieve this

1, the first window width dependent element, there is a need to accept a variable window width

　　In the data set:

screenWidth: document.documentElement.clientWidth, // width of the screen

2, the window changes when the need for timely updates variable values

　　Set the listening window changes in the mounted monitor events

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

3, page load time to give the assignment element width

　　The width of the mounted window width setting element

document.getElementById ( 'topbar'). style.width = the this .screenWidth-+ 260. 'PX' is the difference element 260. // and windows, can be adjusted as required

4, the listening window changes

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