有人知道如何用复合API在Vue 3中获得元素的offsetTop吗？像这个版本的Vue 2？
goto(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}我的设置（）中有：
const accordions = ref([]);
...
<Disclosure
v-slot="{ open }"
v-for="(region, index) of data"
:key="index"
:ref="(el) => pushToRef(el, index)"
>...</Disclosure>
function pushToRef(el, index) {
accordions[index] = el;
}它被v-for的元素填充。我可以稍后从数组中取出代理。但不能取出偏移量：
const element = accordions[region];
console.log("Region: " + region); //got the name
console.log("Element: ", element); // Proxy of element
const top = element.offsetTop; // UNDEFINED ???
console.log("OffsetTop: " + top); // !!! Undefined
window.scrollTo({ top: top, left: 0, behavior: "smooth", });
2条答案
按热度按时间q0qdq0h21#
我认为您的代码在组件装入之前就已运行。请尝试将其 Package 在
onMounted中xxe27gdn2#
我不确定你是否想改变
accordions，因为它是一个ref对象，但如果你在实际代码中这样做，你应该避免它，而是改变内部的值，即accordions.value。现在，由于
Disclosure是一个组件而不是HTML元素，vue的template ref不会引用该元素的DOM，而是引用Disclosure组件的Vue示例。您可以在这里阅读更多相关内容。您需要访问HTML元素的DOM，如下所示：
el.$el，则可以访问包括offsetTop在内的所有DOM属性。如果要检查组件示例的所有属性，可以在此处找到它们。
附注：此ref行为在Options API中也是相同的，也就是说，您将以类似的方式访问vue组件的DOM属性，如下所示：
this.$refs['REF_NAME'].$el