v-for生成的div,获取坐标
时间: 2023-07-04 15:05:58 浏览: 141
要获取一个元素的坐标,可以使用 DOM API 中的 getBoundingClientRect() 方法。
在 Vue.js 中,可以通过 ref 属性和 $refs 对象来获取元素的引用,然后在 mounted 钩子函数中获取元素的坐标信息。
例如,假设我们有以下模板:
```html
<template>
<div>
<div
v-for="(item, index) in items"
:key="index"
:ref="'item-' + index"
class="item"
>
{{ item }}
</div>
</div>
</template>
```
我们可以在 mounted 钩子函数中获取每个 item 元素的坐标信息:
```js
mounted() {
this.items.forEach((item, index) => {
const el = this.$refs[`item-${index}`][0];
const rect = el.getBoundingClientRect();
console.log(`item-${index} top: ${rect.top}, left: ${rect.left}`);
});
}
```
这里使用了 forEach() 方法来遍历数组中的每个元素,然后通过 `$refs` 对象获取对应的元素。最后,使用 getBoundingClientRect() 方法获取元素的坐标信息,并打印出来。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)