获取点击的区域范围

  <div>
     <div>外部</div>
     <TestRef ref="testRef"></TestRef>
  </div>

import TestRef from "@/components/TestRef.vue";

  mounted() {
    let obj = {leftRef:"",rightRef:""}
    console.log("外部mounted")
    console.log(this.$refs.testRef.$refs.leftRef)
    let element = this.$refs.testRef.$refs.leftRef
    console.log(element.getBoundingClientRect())
    let arr = []
    let scrollLeft = document.documentElement.scrollLeft
    let scrollTop = document.documentElement.scrollTop
    for(let key in obj){
      let element = this.$refs.testRef.$refs[key]
      let rect = element.getBoundingClientRect()
      let temObj={flag:key,rect: [rect.left+scrollLeft,rect.right+scrollLeft,rect.top+scrollTop,rect.bottom+scrollTop]}
      arr.push(temObj)
    }
    console.log(arr)
    this.$store.commit("saveCurrentPageRectInfo",arr)
    console.log(document.documentElement.scrollLeft)
    console.log(document.documentElement.scrollTop)
    
    setTimeout(() => {
      // console.log(document.body.scrollTop) // 这个一直为0
      // console.log(document.documentElement.scrollTop)//需要用这个
    }, 2000);
    
  },

<div style="margin-left:50px;">
   <div class="left" ref="leftRef">
      left
      <el-button @click="handleClick">点击</el-button>
   </div>
   <div class="right" ref="rightRef" style="margin-left:2000px">
      right
      <el-button @click="handleClick" size="small">
        点击
      </el-button>
   </div>
   
</div> 

handleClick(e){
  console.log(e)
  console.log(e.pageX)
  console.log(e.pageY)
  console.log(this.$store.state.currentPageRectInfo)
  let arr = this.$store.state.currentPageRectInfo
  for(let i=0;i<arr.length;i++){
       if((e.pageX>arr[i].rect[0] && e.pageX<arr[i].rect[1]) && 
          (e.pageY>arr[i].rect[2] && e.pageY<arr[i].rect[3])){
            console.log(arr[i].flag)
       }
  }
}