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

代码见文末

vue3实现

最开始就用的vue3实现，如下

Vue3实现方式

vue2开发和使用文档

组件功能

TooltipText 是一个文字展示组件，具有以下功能：

• 文本显示：支持单行和多行文本显示。
• 自动判断溢出：判断文本是否溢出，根据溢出情况显示 tooltip。
• 自定义样式：可以通过 props 修改文本样式和 Tooltip 样式。
• 行数限制：支持多行文本显示，超出部分通过行数限制显示省略号。

---

使用方法

1. 引入组件 将 TooltipText 注册到你的 Vue 项目中：

   import TooltipText from './TooltipText.vue';
   
   export default {
     components: {
       TooltipText,
     },
   };
   

2. 组件模板示例

   <template>
     <TooltipText
       :content="'这是一个演示文本。'"
       :lineClamp="2"
       :maxWidth="300"
       :tooltipOptions="{
         placement: 'top',
         effect: 'light',
         trigger: 'hover',
       }"
       :outStyle="{ color: '#333', fontSize: '16px' }"
     />
   </template>
   

3. 传入参数

   属性名	类型	默认值	说明
   tooltipOptions</