vue3计算插槽元素的宽高

在Vue3中，可以通过$refs来获取插槽元素的宽高。

假设我们有一个包含插槽的组件，插槽里面有一个元素，如下所示：

<template>
  <div>
    <slot></slot>
  </div>
</template>

我们可以在组件内使用$refs来获取插槽元素的宽高，如下所示：

<template>
  <div>
    <slot ref="slot"></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    const slotEl = this.$refs.slot.$el
    const width = slotEl.offsetWidth
    const height = slotEl.offsetHeight
    console.log('插槽元素的宽度为：', width)
    console.log('插槽元素的高度为：', height)
  }
}
</script>

在mounted生命周期中，我们通过this.$refs.slot.$el获取到插槽元素的DOM节点，然后可以使用offsetWidth和offsetHeight属性获取插槽元素的宽高，并将其打印到控制台上。