kt-template-admin/skills/references/components/common/ellipsis-text.md

Vben EllipsisText 省略文本

用于展示超长文本，支持省略、Tooltip 提示以及点击展开收起。

基础用法

<script setup lang="ts">
import { EllipsisText } from '@vben/common-ui';
</script>

<template>
  <EllipsisText :max-width="200">
    这是一段很长的文本内容，超出部分会被省略显示...
  </EllipsisText>
</template>

可折叠文本

<template>
  <EllipsisText :line="2" expand>
    这是一段很长的文本内容，默认显示2行，点击可以展开查看全部内容。
    展开后再次点击可以收起。
  </EllipsisText>
</template>

自定义 Tooltip

<template>
  <EllipsisText>
    这是一段文本
    <template #tooltip>
      <div>自定义提示内容</div>
    </template>
  </EllipsisText>
</template>

仅省略时显示 Tooltip

<template>
  <!-- 只有文本被截断时才显示 Tooltip -->
  <EllipsisText tooltip-when-ellipsis>
    这是一段文本
  </EllipsisText>
</template>

Props 属性

属性名	描述	类型	默认值
expand	是否支持点击展开/收起	boolean	false
line	文本最大显示行数	number	1
maxWidth	文本区域最大宽度	number | string	'100%'
placement	提示浮层位置	'top' | 'bottom' | 'left' | 'right'	'top'
tooltip	是否启用文本提示	boolean	true
tooltipWhenEllipsis	是否仅在文本被截断时显示提示	boolean	false
ellipsisThreshold	文本截断检测阈值	number	3
tooltipBackgroundColor	提示背景色	string	''
tooltipColor	提示文字颜色	string	''
tooltipFontSize	提示文字大小（px）	number	14
tooltipMaxWidth	提示内容最大宽度（px）	number	-
tooltipOverlayStyle	提示内容区域样式	CSSProperties	{ textAlign: 'justify' }

Events 事件

事件名	描述	类型
expandChange	展开状态变化时触发	(isExpand: boolean) => void

插槽

插槽名	描述
default	文本内容
tooltip	自定义提示内容

表格中使用

<script setup lang="ts">
import { EllipsisText } from '@vben/common-ui';

const columns = [
  {
    field: 'description',
    title: '描述',
    slots: {
      default: ({ row }) => {
        return h(EllipsisText, {
          maxWidth: 200,
          line: 2,
          expand: true,
        }, () => row.description);
      },
    },
  },
];
</script>

使用场景

• 表格长文本列
• 列表项描述
• 评论内容展示
• 日志信息展示