Vue实现判断文本是否超出，超出后显示省略号并且hover展示全部内容

更新时间：2024-12-23 07:09:33

在项目开发中，面对文本内容过长导致显示不全的问题，可以借助Vue框架封装一个组件来解决。该组件具备两个核心功能：一是文本超出时隐藏，二是鼠标hover显示全部内容。

为了实现这一功能，首先需要了解以下关键点：

1. 文字超出多行隐藏：通过CSS设置溢出隐藏属性，如`overflow: hidden`，限制文本显示。

2. 判断文字是否处于隐藏状态：利用JavaScript计算元素的实际高度与行高乘以行数之和，判断隐藏条件。

组件设计思路如下：

设计一个接受两个参数的组件，分别为`value`（展示的文字内容）和`row`（最多展示几行），并创建一个div元素，用于鼠标hover时显示完整文本。

实现代码示例（简化处理）：

1. 组件全量代码示例：

代码以模板形式呈现，实现逻辑与实际项目可能有所差异。

2. 组件的引用与使用方法：

在Vue项目中引入组件，然后在需要展示文本的元素上使用组件标签。

组件效果展示：

示例展示组件如何在文本超出规定行数时隐藏，并通过hover显示完整文本。

针对页面滚动时弹窗位置问题，通过获取最近一个`overflow`值为`auto`或`scroll`的父元素，监听滚动事件，适时关闭弹窗，并加入高度碰撞检测逻辑。

在实际项目中，使用了`vue-cy-admin`进行相关代码实现。

对于Vue3版本，重新构建组件，利用`element-plus`库中的`tooltip`组件简化提示功能。

项目中使用了自动引入工具（`unplugin-vue-components`、`unplugin-auto-import`）以方便组件调用。但在引入组件时可能遇到报错问题，具体解决方法参见项目GitHub地址：`vue3-vite-admin`。

预览地址提供给读者查看实际效果。