Listen to the left width of the browser to calculate the distance

problem ： Left side tab The column switch needs to be positioned on the left
Scheme 1 ： My first thought was relative positioning , But because of the above two tab Switch is a component , So locate it below He'll disappear , It's hiding , Out of document flow , But it also hides , I don't know why . Later, fixed positioning was used , Can appear But it is not adaptive .
Option two ： The front page is divided into two boxes . Problems arise ： The head will be stretched out
Option three ： Listen to the width on the left side of the browser Calculated distance （ Can achieve ）

First, give the whole tab Add a dynamic fixed positioning style to the column

<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>

And then use getBoundingClientRect() Calculation content Distance of

getBoundingClientRect() This method returns a rectangular object , Contains four properties ：left、top、right and bottom. Represents the distance between each edge of the element and the top and left side of the page .

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

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

Now it can be fixed on the left side , But it is not adaptive yet , So you need to listen and calculate for the second time

addEventListener() Add event listener
addEventListener(event, function, useCapture)
（1） Parameters event Required , Represents the event being monitored , for example click, resize etc. , Without prefixes on Events .
（2） Parameters function Required , A function that represents the call after event triggering , It can be an externally defined function , It can also be an anonymous function . With no arguments .
（3） Parameters useCapture optional , fill true perhaps false, Used to describe whether the event is bubbling or capturing triggering ,true To capture , Default false Means bubbling .

resize The logical operation to be processed when processing window scaling ！

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';
      }
    });

So it can be fixed on the left And adaptive