<template>
  <a-tooltip placement="topLeft">
    <template #title>
      <span style="white-space: pre-wrap;text-align: left;">{{ value }}</span>
    </template>
    <div v-if="isLink" style="white-space: pre-wrap;text-align: left;color:#1890ff">{{ showText }}</div>
    <div v-else="isLink" style="white-space: pre-wrap;text-align: left;">{{ showText }}</div>
  </a-tooltip>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
import { propTypes } from '/@/utils/propTypes';

  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    length: propTypes.number.def(25),
    isLink: propTypes.bool.def(false),
  });
  //显示的文本
  const showText = computed(() =>
    props.value ? (props.value.length > props.length ? props.value.slice(0, props.length) + '...' : props.value) : props.value
  );
</script>
