解决vue+watch监听元素不及时方案/放大到150%元素出现问题

使用ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。 实例：监听元素的宽度变化（因使用nextTick时获取元素的scrollWidth和offetWidth存在延迟性，无法实时判断是否需要显示tip）

实现元素超出才显示提示框

<script setup lang="ts">
import { onMounted, ref, nextTick, onUnmounted } from 'vue';

const contentRef = ref();

const showTip = ref(false);

let resizeObserver: ResizeObserver;

onMounted(() => {
  resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      showTip.value = contentRef.value?.scrollWidth > Math.round(entry.contentRect.width);
    }
  });

  nextTick(() => {
    resizeObserver.observe(contentRef.value);
  });
});

onUnmounted(() => {
  resizeObserver.disconnect();
});
</script>

<template>
  <el-popover :disabled="!showTip" trigger="hover">
    <div ref="contentRef" class="content">
      <slot></slot>
    </div>
    <template #content>
      <slot name="content"></slot>
    </template>
  </d-popover>
</template>