如何在子组件slot插槽加载完,获取其高度

slots

#1

如何在子组件slot插槽加载完获取其高度,我在$nextTick里获取,但是不准确,获取到的是86px,但是我要是延时1s,后获取就是正确数值120px。
延时时间不能写死,望各位大神不吝赐教,有什么好的办法获取准确高度?


#2

updated生命周期呢?


#3
  • 一般来说,直接用在 mounted 就可以获取所有 dom (用 ref 方便些)
  • 但是如果 slot 里内容生成有异步操作,可以在异步操作完成之后,通过 nextTick 获取高度

#4

mounted钩子里面 调用this.nextTick 你可以通过dom引用 ref(假设是ref=“table”) ,来获取他的高度。顺便一起巩固下,如果slot是vue组件直接.this.$refs.table.style.height 应该就能获取的到,如果是第三方插件(例如他是element-ui之类).那就需要通过this.$refs.table.$el.clientHeight来获取。试试看吧


#5

updated没执行


#6

异步要是有也是在父级中,子集可以检测到?现在就是在子级中的mounted中nextTick里获取到的不准确


#7

现在就是在mounted里this.$slots.header获取到元素,然后加入nextTick中获取高度不准确,唯有延时才可以,时间少了还不行:joy:


#8

那就更好办了,你设置一个 flag 用来标识子 slot 是否显示。

  • 初始化为 false(也就是开始的时候,不渲染 slot)
  • 父级异步完成之后,在完成的回调里设置 flag 为true

就可以了