decorate/src/components/easyText/index.vue

<template>
  <a-tooltip v-if="isOverflow" placement="topLeft">
    <template #title>
      <span>{{ content }}</span>
    </template>
    {{ easyContent }}
  </a-tooltip>
  <template v-else>
    {{ content }}
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'easyText' })
const props = withDefaults(
  defineProps<{ content: string; maxLen?: number }>(),
  {
    maxLen: 50
  }
)

const isOverflow = computed(() => props.content.length > props.maxLen)
const easyContent = computed(() =>
  isOverflow.value
    ? props.content.substring(0, props.maxLen) + '...'
    : props.content
)
</script>