vue3 组合式api useSlots 获取元素宽度高度

在Vue3的组合式API中，我们可以使用useSlots来获取插槽内容，并使用ref来获取元素的宽度和高度。

首先，在组件中定义一个ref，用于存储元素的宽度和高度。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const elWidth = ref(0);
    const elHeight = ref(0);

    onMounted(() => {
      elWidth.value = document.querySelector('.my-element').offsetWidth;
      elHeight.value = document.querySelector('.my-element').offsetHeight;
    });

    return { elWidth, elHeight };
  }
}

在上面的代码中，我们使用ref定义了elWidth和elHeight，并在onMounted生命周期钩子中获取元素的宽度和高度，并将它们存储在elWidth和elHeight中。

然后，在模板中使用useSlots获取插槽内容，并将其放置在需要获取宽度和高度的元素中，并通过ref绑定元素。

<template>
  <div class="my-element" ref="myElement">
    <slot v-bind="$attrs"></slot>
  </div>
</template>

最后，在onMounted生命周期钩子中，通过ref获取元素，并使用offsetWidth和offsetHeight获取宽度和高度，然后将它们存储在elWidth和elHeight中。

import { ref, onMounted, useSlots } from 'vue';

export default {
  setup() {
    const myElement = ref(null);
    const slots = useSlots();

    const elWidth = ref(0);
    const elHeight = ref(0);

    onMounted(() => {
      elWidth.value = myElement.value.offsetWidth;
      elHeight.value = myElement.value.offsetHeight;
    });

    return { myElement, slots, elWidth, elHeight };
  }
}

最终，在模板中可以直接使用elWidth和elHeight，以获取元素的宽度和高度。

<template>
  <div class="container">
    <div class="title">{{ slots.title }}</div>
    <div class="content" ref="myElement">
      <slot v-bind="$attrs" name="content"></slot>
    </div>
    <div class="footer">{{ slots.footer }}</div>
    <p>元素宽度: {{ elWidth }}px</p>
    <p>元素高度: {{ elHeight }}px</p>
  </div>
</template>