Vue3 组合式 API 计算插槽元素宽高：完整指南

在 Vue3 组合式 API 中，可以使用 'ref' 和 'onMounted' 等函数来计算插槽元素的宽高。具体步骤如下：

1. 使用 'ref' 创建一个响应式变量，用于存储插槽元素的引用。
2. 在组件模板中，使用 'v-slot' 指令将插槽元素绑定到上一步创建的变量上。
3. 在 'onMounted' 钩子函数中，通过 'el.value.offsetWidth' 和 'el.value.offsetHeight' 属性获取插槽元素的宽高，并将其存储到另外两个响应式变量中。

以下是一个示例代码：

<template>
  <div>
    <slot v-slot:default="slotProps" ref="slotRef"></slot>
    <p>插槽元素的宽度为：{{ slotWidth }}</p>
    <p>插槽元素的高度为：{{ slotHeight }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const slotRef = ref(null);
    const slotWidth = ref(0);
    const slotHeight = ref(0);

    onMounted(() => {
      slotWidth.value = slotRef.value.offsetWidth;
      slotHeight.value = slotRef.value.offsetHeight;
    });

    return {
      slotRef,
      slotWidth,
      slotHeight,
    };
  },
};
</script>

在上述代码中，'slotRef' 变量用于存储插槽元素的引用，'slotWidth' 和 'slotHeight' 变量分别用于存储插槽元素的宽度和高度。在 'onMounted' 钩子函数中，通过 'slotRef.value.offsetWidth' 和 'slotRef.value.offsetHeight' 属性获取插槽元素的宽高，并将其存储到对应的变量中。最后在组件模板中使用插值语法显示宽高即可。