vue3 通过ref获取元素离顶部的距离

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)
                    })