监听浏览器左侧宽度计算距离

问题：左侧的tab栏切换需要定位在左侧
方案一：我先想到的是相对定位，但由于上面的两个tab切换是组件，所以在下面定位出去 他就会消失，也就是隐藏，脱离文档流了，但也会隐藏，不知道原因。后来用了固定定位，可以出现 但不能自适应。
方案二：在首页分为两个盒子。问题出现：头部会被撑开
方案三：监听浏览器左侧的宽度 计算距离（可以实现）

首先给整体的tab栏加个动态的固定定位样式

<div class="tab" :style="{position: 'fixed',left:flexLT.left,top:'200px'}">
      <div :class="[num == index ? 'border_tips' : '']" class="tabbar" v-for="(item,index) in arr" :key="index"
           @click="changeIndex(index)">
        {{ item }}
      </div>
    </div>

然后用getBoundingClientRect()计算content的距离

getBoundingClientRect()这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

<div class="content" ref="nodeHome">...</div>

var oneLeft = this.$refs.nodeHome.getBoundingClientRect().left;
    this.flexLT.left = (oneLeft-160)+'px';

到这就已经可以固定在左侧了，但是还不能自适应，所以需要第二次监听计算

addEventListener()添加事件监听
addEventListener(event, function, useCapture)
（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。
（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。
（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。

resize 处理窗口缩放时要处理的逻辑操作！

var oneLeft = this.$refs.nodeHome.getBoundingClientRect().left;
    this.flexLT.left = (oneLeft-160)+'px';
    window.addEventListener('resize', () => {
      var dataLeft = this.$refs.nodeHome.getBoundingClientRect().left;
      if(dataLeft){
        this.flexLT.left = (dataLeft-160)+'px';
      }
    });

这样就可以固定在左侧 并且实现自适应