antd-tooltips 根据容器溢出判断是否展示封装jsx

import { defineComponent, onMounted, ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import { Tooltip } from 'ant-design-vue'
const CTooltip = defineComponent({
  name: 'CTooltip',
  props: {
    /** 开启溢出省略 默认为false 开启此选项默认slot建议传纯字符串或span否则推荐自行实现 */
    openEllipsis: {
      type: Boolean,
      default: () => false
    },
    /** 卡片类名 */
    overlayClassName: {
      type: String
    }
  },
  setup(props, { slots, attrs, expose, emit }) {
    const prefixCls  = 'name-space'
    const defaultContainerRef = ref(null)
    /** 是否触发溢出省略 */
    const isOverflowEllipsis = ref(false)

    onMounted(() => {
      useResizeObserver(defaultContainerRef.value, entries => {
        const entry = entries[0]
        const { width } = entry.contentRect
        // 当前元素宽度小于内容宽度时触发省略
        isOverflowEllipsis.value = Number(width) < Number(defaultContainerRef.value.scrollWidth)
      })
    })
    return () => {
      const { title = slots.title, overlayClassName, openEllipsis, ...otherProps } = props
      const { ...otherAttrs } = attrs
      return (
        <Tooltip
          destroyTooltipOnHide={true}
          title={title}
          class={[prefixCls, props.class ?? '']}
          color="#4E5969"
          overlayClassName={`${prefixCls}-overlay${overlayClassName ? ` ${overlayClassName}` : ''}`}
          arrowPointAtCenter
          mouseEnterDelay={0.2}
          getPopupContainer={() => document.getElementById('app')}
          {...otherProps}
          {...otherAttrs}
        >
          {openEllipsis ? (
            <div
              class={['overflow-ellipsis', isOverflowEllipsis.value ? '' : 'disable-div-title']}
              ref={defaultContainerRef}
            >
              {slots.default()}
            </div>
          ) : (
            slots.default()
          )}
        </Tooltip>
      )
    }
  }
})
export default CTooltip