vue3版本 ^3.2.45
[ref].value.$el.getBoundingClientRect().top- 通过ref获取元素。
- 使用
getBoundingClientRect().top获取离顶部的距离
Vue无法读取HTMLCollection列表的length问题解决方案
实践项目时候发现一个问题
在mounted阶段，获取Element对象，console.log()可以读取出列表，而却无法读出它的length
以下出自官方文档
mounted
类型：Function
详细：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。
如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
<a-menu
ref="menuRef"
v-model:selectedKeys="doublerowSelectedKey"
:theme="sideTheme"
class="snowy-doublerow-layout-menu"
>
const menuRef = ref()
//等到整个视图都渲染完毕，可以用 nextTick 替换掉 mounted
nextTick(() => {
style.value = `top:${menuRef.value.$el.getElementsByClassName('ant-menu-item-selected')[0].offsetTop}px` //'top:400px;'
//alert(menuRef.value.$el.getElementsByClassName('ant-menu-item-selected')[0].offsetTop)
})
标签：el,顶部,top,vm,value,vue3,mounted,ref From： https://www.cnblogs.com/Fooo/p/18241442