多行文本溢出toolTips组件

前言

功能说明

Vue3版本实现、css部分使用TailWind，同查看更多组件类似。Ant-Designe组件toolTips使用

1.支持控制行数

2.控制是否显示提示文本

实现

<template>
  <div class="relative">
    <a-tooltip
      :overlay-style="{ maxWidth: '80%' }"
      :get-popup-container="(triggerNode) => triggerNode.parentNode"
      trigger="click"
    >
      <template v-if="showTooltip && showSuspension" #title>
        <div
          style="max-height: 40vh; overflow: auto"
          class="whitespace-pre-wrap break-all"
          v-highlight="tooltip"
        >
        </div>
      </template>
      <div
        ref="briefRef"
        :class="[
          { 'text-[#999]': props.secondary, 'cursor-pointer': showTooltip && showSuspension },
          'overflow-hidden',
          'break-all',
          showSuspension ? 'suspension' : ''
        ]"
        :style="{
          fontSize: `${props.fontSize}px`,
          lineHeight: `${props.fontSize * props.lineHeightScale}px `,
          maxHeight: `${props.fontSize * props.lineHeightScale * props.line}px`,
        }"
      >
        <div
          class="whitespace-pre-wrap"
          :style="{
            width: '100%',
            height: '100%',
          }"
          v-highlight="brief"
          v-resize="getHeight"
        >
        </div>
      </div>
    </a-tooltip>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'ListItemBrief',
  };
</script>
<script setup lang="ts">
  import { computed, ref, nextTick } from 'vue';
  import { vHighlight } from '/@/directives/text';

  /**
   * 多行文本配置
   * @property label 标签
   * @property text 文本
   * @property [showTooltip] 是否显示溢出提示文本
   * @property [tooltip] 溢出提示文本
   * @property [line] 限制行数
   * @property [secondary] 是否显示次要字体样式
   */
  export interface BriefProps {
    label?: string;
    text: string;
    fontSize?: number;
    showTooltip?: boolean;
    tooltip?: string;
    line?: 1 | 2 | 3;
    lineHeightScale?: number;
    secondary?: boolean;
    filterEmpty?: boolean;
  }
  const props = withDefaults(defineProps<BriefProps>(), {
    text: '',
    line: 2,
    lineHeightScale: 1.75,
    fontSize: 14,
    secondary: false,
    showTooltip: true,
    filterEmpty: true,
  });
  const showSuspension = ref<boolean>(false);

  const formatSpace = (text = '') => {
    return (text && typeof text === 'string' && props.filterEmpty)
      ? text.replace(/[\\t|\\n|\\r]/g, '').trim()
      : text;
  };
  const brief = computed(() => formatSpace((props.label || '') + props.text));
  const tooltip = computed(() => formatSpace(props.tooltip || props.text));
  const getHeight = (rect: ClientRect) => {
    nextTick(() => {
      if (rect.height > props.fontSize * props.line * props.lineHeightScale) {
        showSuspension.value = true;
      } else {
        showSuspension.value = false;
      }
    })
  };
</script>
<style scoped lang="less">
  .suspension {
    position: relative;
    &::after {
      background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.5), #fff 40%);
      bottom: 0;
      content: '...';
      padding-left: 30px;
      position: absolute;
      right: 0;
      width: 50px;
      z-index: 100;
    }
  }
</style>