Vben EllipsisText 省略文本

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

如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。

基础用法

通过默认插槽提供文本内容，maxWidth 用于限制文本区域宽度。

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

const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
`;
</script>
<template>
  <EllipsisText :max-width="500">{{ text }}</EllipsisText>
</template>

可折叠文本

通过 line 设置折叠后的最大行数，通过 expand 开启点击展开与收起。

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

const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
`;
</script>
<template>
  <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
</template>

自定义提示浮层

通过 tooltip 插槽自定义提示内容。

<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
</script>
<template>
  <EllipsisText :max-width="240">
    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
    <template #tooltip>
      <div style="text-align: center">
        《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
        深海的光 停滞的海浪
      </div>
    </template>
  </EllipsisText>
</template>

仅在省略时显示 Tooltip

通过 tooltip-when-ellipsis 控制仅在文本被截断时显示 Tooltip。

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

const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
`;
</script>
<template>
  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
    {{ text }}
  </EllipsisText>

  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
    {{ text }}
  </EllipsisText>
</template>

API

Props

属性名	描述	类型	默认值
expand	是否支持点击展开或收起	boolean	false
line	文本最大显示行数	number	1
maxWidth	文本区域最大宽度	number | string	'100%'
placement	提示浮层位置	'bottom' | 'left' | 'right' | 'top'	'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

Slots

插槽名	描述
tooltip	开启文本提示时，用于自定义提示内容

贡献者

cuiteng

页面历史

最后编辑于 4 分钟前

查看完整历史

fcb81b3-Initial commit