UseElTooltip - 文字提示
组件介绍
UseElTooltip 是基于 Element Plus 生态下的 el-tooltip 进行二次封装的通用文字提示组件，旨在简化文字提示的使用流程、统一溢出提示的交互逻辑、减少重复开发成本。该组件继承 el-tooltip 核心能力的同时，新增文本溢出自动触发提示的核心特性，支持自定义提示位置、自定义容器类名、插槽覆盖提示内容等能力，仅需通过配置项即可完成绝大部分文字提示场景的开发，无需重复编写溢出判断和提示绑定逻辑，大幅提升中后台系统中文字提示组件的开发效率和可维护性。
核心亮点
- 溢出自动触发提示：内置 ResizeObserver 监听元素尺寸变化，自动判断文本是否溢出（scrollWidth > clientWidth），仅当文本溢出时才激活 tooltip 提示，非溢出状态自动禁用提示，无需手动编写溢出判断逻辑。
- 原生能力全兼容：完全继承 el-tooltip 的 placement 位置配置（支持 top/left/right/bottom 等 12 种位置）、content 提示内容等核心属性，同时支持通过插槽覆盖提示内容，既保留原生组件灵活性，又新增专属能力。
- 极简的溢出提示开发：无需手动绑定元素尺寸监听、溢出状态判断、tooltip 禁用状态控制等逻辑，仅需传入 content 内容和少量配置项，即可实现 “文本溢出才显示提示” 的核心需求，减少 80% 以上的重复逻辑代码。
- 自定义样式适配：支持通过 spanClass 配置项自定义文本容器的类名，结合内置的 text-ellipsis 溢出省略样式，无需重复编写省略样式代码，同时满足个性化样式定制需求。
- 灵活的禁用逻辑适配：内置智能禁用逻辑，当传入 content 时，禁用状态由 “是否溢出 + 外部 disabled 属性” 共同决定；无 content 时则直接继承外部 disabled 属性，适配有无自定义内容的不同场景。
解决痛点
- 原生 el-tooltip 需手动处理溢出触发逻辑
- 痛点：原生 el-tooltip 无溢出判断能力，若需实现 “文本溢出才显示提示”，需手动编写元素尺寸监听、溢出状态判断、绑定 tooltip 的 disabled 属性等代码，每个提示场景都需重复开发，且监听逻辑易遗漏销毁步骤，导致内存泄漏。
- 解决方案：组件内置 v-overflow 指令封装 ResizeObserver 监听逻辑，自动处理溢出状态更新和销毁逻辑，同时关联 tooltip 的 disabled 状态，模板中仅需引入
<UseElTooltip />并传入 content，即可实现溢出触发提示，无需编写任何监听和判断代码。
- 文本溢出省略样式重复编写
- 痛点：实现文本省略效果需重复编写 display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 等样式，不同页面样式写法不统一，且易遗漏关键样式导致省略效果失效。
- 解决方案：组件内置 text-ellipsis 通用省略样式，文本容器默认绑定该样式，无需重复编写省略样式代码；同时支持 spanClass 自定义类名覆盖样式，既保证样式统一性，又满足个性化需求。
- 提示禁用状态控制逻辑混乱
- 痛点：原生 el-tooltip 的 disabled 属性需手动控制，若需结合 “是否溢出”“外部禁用” 等多条件，需在模板或脚本中编写复杂的判断逻辑，不同开发者实现方式不同，易出现 “溢出不显示提示”“非溢出仍显示提示” 等异常。
- 解决方案：组件内置 computed 计算属性 disabled，根据 “是否传入 content”“外部 disabled 属性”“溢出状态” 自动推导禁用状态，逻辑全局统一，无需手动编写条件判断，避免禁用状态异常问题。
- 多位置提示配置繁琐
- 痛点：原生 el-tooltip 的 placement 属性需手动验证合法性，若输入错误的位置值（如 “top-left”），组件无提示且无法正常显示，需逐个核对位置值是否符合规范，开发效率低。
- 解决方案：组件在 props 中内置 placement 字段的校验器，仅允许传入 top/top-start 等 12 种合法位置值，非法值会触发校验报错，提前规避位置配置错误导致的提示显示异常问题。
- 跨页面提示交互逻辑不一致
- 痛点：中后台系统多个页面的文字提示，有的页面实现了 “溢出才显示”，有的直接显示，提示位置、禁用逻辑、省略样式等不统一，影响用户体验，后期调整需逐个页面修改，维护成本高。
- 解决方案：组件封装了统一的溢出判断逻辑、默认提示位置（top）、默认省略样式和禁用规则，同时支持通过 placement、spanClass 等配置项覆盖默认值，既保证全局交互逻辑一致性，又满足个性化场景需求。
- 动态文本溢出状态无法实时更新
- 痛点：若文本内容动态变化（如接口返回数据更新），原生实现需手动触发溢出判断，否则提示状态无法同步更新，易出现 “文本已溢出但提示不显示” 或 “文本未溢出但提示仍显示” 的问题。
- 解决方案：组件通过 ResizeObserver 实时监听元素尺寸变化，无论文本内容还是容器尺寸动态调整，都会自动触发溢出状态更新，同步调整 tooltip 禁用状态，确保提示状态与文本溢出状态实时一致。