cip-components/cip-overflow-tooltip/index.jsx

import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
import { ElPopover } from 'element-plus'
import './index.less'

export default defineComponent({
  name: 'CipOverflowTooltip',
  props: {
    placement: {
      type: String,
      default: 'top',
      validate: (value) => {
        return ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'].includes(value)
      }
    },
    trigger: {
      type: String,
      default: 'hover',
      validate: (value) => {
        return ['click', 'focus', 'hover', 'manual'].includes(value)
      }
    },
    rowKey: {}
  },
  setup (props, { slots }) {
    const wrapperRef = ref()
    const isOverflow = ref(false)
    const computeOverflow = () => {
      const el = wrapperRef.value
      el.style.whiteSpace = 'nowrap'
      const parentElement = el.parentElement
      parentElement.style.overflow = 'hidden'
      // isOverflow.value =
      return el.scrollWidth > parentElement.offsetWidth
    }

    onMounted(() => {
      watch(() => props.rowKey, () => {
        isOverflow.value = false
        nextTick(() => {
          isOverflow.value = computeOverflow()
        })
      }, { immediate: true, deep: true })
    })
    return () => {
      return <div ref={wrapperRef}>
        {!isOverflow.value && slots.default?.()}
        {isOverflow.value &&
          <ElPopover trigger={props.trigger} placement={props.placement}>
            {{
              reference: () => <div class={'text-ellipsis'}>{slots.default?.()}</div>,
              default: () => slots.default?.()
            }}
          </ElPopover>
        }
      </div>
    }
  }
})