getBoundingClientRect获取元素位置以及在Vue中的使用

1. 前言

本文主讲内容为：getBoundingClientRect()函数说明以及在原生JS中和Vue环境下如何使用

2. getBoundingClientRect函数

getBoundingClientRect 函数使用在dom元素中

Element.getBoundingClientRect() 方法返回一个DOMRect对象，其中包含了盒子的大小及其相对于浏览器窗口的位置。

{
    width: 1000
    height: 148
    left: 200
    right: 1200
    top: 153
    bottom: 301
    x: 200
    y: 153
}

如果是标准盒子模型，元素的尺寸等于width（或者height】 + padding + border-width的总和。如果设定了box-sizing: border-box;属性，则元素的的尺寸等于 width/height。

图片中展示了返回值所表示的内容

3. 原生使用方法

JS中使用比较简单，获取到dom元素，然后直接调用getBoundingClientRect即可

document.getElementById("myId").getBoundingClientRect()

上面的代码执行效果如下

4. Vue中使用

在vue中我们有两种使用方式，$refs 和 event.target

4.1 使用 $refs 获取到dom后调用

直接看代码

<template>
    <div>
        <!-- html 创建10行数据-->
        <div v-for="i in 10">
            <p :ref="'p_' + i">这是第{{i}}行</p>
        </div>
    </div>
</template>

<script>

    export default{
        mounted() {
            for (let i = 1; i < 11; i++) {
                let [div] = this.$refs['p_' + i ]  // 特别注意这一行，赋值给了数组
                console.log("-"+i+"-",div.getBoundingClientRect())
                
                //另一种写法
                let div = this.$refs['p_' + i]  // 赋值给了普通变量
                console.log("-"+i+"-",div[0].getBoundingClientRect())
            }
        }
    }
</script>

这是执行结果

特别说明
我们平时使用 $refs 时都是把值直接赋值给里一个变量，其实 this.$refs 返回的是一个数组

4.2 解决 getBoundingClientRect is not a function

就是上面的特别说明中的问题引起的， 我们只需要把 this.$refs 获取的值赋值给一个数组即可,也可以复制给一个普通变量 myDiv， 调用函数的时候用

let myDiv = this.$refs.p_1  // 赋值给了普通变量
myDiv[0].getBoundingClientRect()

4.3 使用 event.target 调用函数

直接看代码

<template>
    <div>
        <!-- html 创建10行数据-->
        <div v-for="i in 10">
            <p :ref="'p_' + i" @mouseover="divDragOver">这是第{{i}}行</p>
        </div>
    </div>
</template>

<script>

    export default{

        methods: {
            divDragOver(event) {
                let div = event.target; // 这里就是获取到的dom元素
                console.log(div.getBoundingClientRect())
            }
        }
    }
</script>

这里属于主动触发，鼠标移入后打印位置。也可以改成click

5. 总结

getBoundingClientRect()有一定的兼容性问题，请自行搜索解决。