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()有一定的兼容性問題，請自行搜索解決。