【vue3】文本自动省略组件，支持单行和多行省略，超出显示tooltip）

代码见文末

vue2实现

最近开发也用到了vue2，随即使用魔法优化改写了一下

v​​​​​​​​​​​​​​vue2实现方式

vue3开发与使用文档：可自适应显示内容的 Tooltip 组件

---

组件介绍

该组件基于 Vue 3 和 Element Plus 构建，主要功能是通过 el-tooltip 实现内容的动态展示。若文本内容超出容器范围，则自动显示 Tooltip 提示框，同时支持自定义行数的裁剪（line-clamp）。

---

开发背景

在前端开发中，长文本内容需要在有限空间中展示时，为了避免视觉杂乱，通常使用文字裁剪和 Tooltip 的组合方案。此组件适合展示动态内容或受限空间的文本场景。

---

使用指南

组件 Props

参数	类型	默认值	必填	说明
toolTipOptions	Object	{placement: 'bottom', effect: 'dark', trigger: 'hover'}	否	Tooltip 配置项，支持所有 el-tooltip 的属性。
outStyle	Object	{ fontSize: '14px' }	否	外层容器样式，支持传入自定义样式。
content