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

server/2024/12/14 4:11:33/
htmledit_views">

代码见文末

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. 传入参数

    属性名类型默认值说明
    tooltipOptionsObject{ content: 'Bottom center', placement: 'bottom', effect: 'dark', trigger: 'hover' }Tooltip 的配置选项,参考 Element UI 的配置。
    outStyleObject{ fontSize: '14px' }外部样式对象,用于自定义文字样式。
    contentString''显示的文本内容。
    lineClampNumber1显示的行数限制,超出部分会显示省略号。
    maxWidthNumber0Tooltip 的最大宽度(单位 px)。
  4. 样式自定义 可通过 tooltipOptionsoutStyle 自定义 Tooltip 和文字样式:

    :tooltipOptions="{effect: 'light',placement: 'right',trigger: 'hover',
    }"
    :outStyle="{ fontSize: '18px', color: '#555' }"
    
  5. 动态内容 内容变动后会自动检查溢出并更新 Tooltip 显示状态,无需额外操作。


开发细节
  1. 溢出检查

    • 单行文本通过 scrollWidthclientWidth 比较实现。
    • 多行文本通过 scrollHeightclientHeight 比较实现。
  2. 计算属性

    • computedMaxPopWidth 动态计算 Tooltip 的最大宽度,默认为文字容器宽度的 50%。
    • computedIfWrap 判断是否为多行文本,根据 lineClamp 属性动态更新。
  3. 监听与更新

    • 使用 watch 监听 content 的变动,在内容更新后重新计算溢出状态。
  4. 样式

    • text-auto-nowrap:单行文本样式,自动截断显示省略号。
    • text-auto-wrap:多行文本样式,支持行数限制。

注意事项
  • 如果文本内容较长但设置了过小的 maxWidth,可能导致 Tooltip 内容显示不全。
  • 若需要动态调整文本或 Tooltip 样式,请确保 props 数据及时更新。

通过此组件可以轻松实现文本展示与溢出提示的功能,并满足多样化的样式需求。

html"><template><!-- Tooltip and text display container --><div><!-- Tooltip element from Element UI --><el-tooltipv-bind="tooltipOptions" <!-- Bind tooltip options -->:popper-class="!toolTipShow ? 'hide-tooltip tooltip-popper' : 'tooltip-popper'" <!-- Conditionally apply tooltip classes -->><!-- Tooltip content slot --><template #content><div class="tooltip-content" :style="{ maxWidth: maxWidth || computedMaxPopWidth + 'px' }" <!-- Set maximum width for tooltip content -->>{{ content }} <!-- Display tooltip content --></div></template><!-- Text display with optional line clamp and styles --><div:class="{ 'text-auto-wrap': computedIfWrap, 'text-auto-nowrap': !computedIfWrap }" <!-- Apply wrapping styles based on computed value -->ref="textAutoRef" <!-- Reference for DOM access -->:style="{'-webkit-line-clamp': lineClamp, <!-- Apply line clamp for text -->'line-clamp': lineClamp, <!-- Apply line clamp for text -->...outStyle <!-- Merge additional styles -->}">{{ content }} <!-- Display main text content --></div></el-tooltip></div>
</template><script>
export default {name: 'TooltipText',props: {// Tooltip options passed to Element UI el-tooltiptooltipOptions: {type: Object,default: () => ({content: 'Bottom center',placement: 'bottom',effect: 'dark',trigger: 'hover',}),},// Additional styles for the text containeroutStyle: {type: Object,default: () => ({fontSize: '14px',}),},// Text content to displaycontent: {type: String,default: '',},// Number of lines to clamp text tolineClamp: {type: Number,default: 1,},// Maximum width for tooltip contentmaxWidth: {type: Number,default: 0,},},data() {return {toolTipShow: false, // Whether to show the tooltiptextAutoRef: null, // Reference to the text container element};},computed: {// Compute the maximum width for the tooltip dynamicallycomputedMaxPopWidth() {if (this.$refs.textAutoRef) {return this.$refs.textAutoRef.clientWidth * 0.5; // Tooltip width is half of the text container width}return '100%'; // Default to full width if reference is not available},// Determine if text wrapping should be applied based on lineClampcomputedIfWrap() {return this.lineClamp > 1;},},watch: {// Watch for changes in content and re-check overflowcontent: {handler() {this.$nextTick(() => {this.checkOverflow();});},immediate: true,},},methods: {// Check if the text content overflows its containercheckOverflow() {if (!this.$refs.textAutoRef) return;if (!this.computedIfWrap) {// Single-line text overflow checkthis.toolTipShow = this.$refs.textAutoRef.scrollWidth > this.$refs.textAutoRef.clientWidth;} else {// Multi-line text overflow checkthis.toolTipShow = this.$refs.textAutoRef.scrollHeight > this.$refs.textAutoRef.clientHeight;}},},mounted() {// Perform overflow check after component is mountedthis.$nextTick(this.checkOverflow);},
};
</script><style lang="scss" scoped>.text-auto-nowrap {width: 100%;white-space: nowrap; <!-- Prevent text wrapping -->overflow: hidden; <!-- Hide overflowing text -->text-overflow: ellipsis; <!-- Show ellipsis for overflow -->text-align: left; <!-- Align text to the left -->}.text-auto-wrap {width: 100%;text-align: left; <!-- Align text to the left -->overflow: hidden; <!-- Hide overflowing text -->text-overflow: ellipsis; <!-- Show ellipsis for overflow -->display: -webkit-box; <!-- Use a flex container for wrapping -->-webkit-box-orient: vertical; <!-- Set vertical orientation for line clamp -->}
</style><style>.hide-tooltip {visibility: hidden !important; <!-- Hide the tooltip completely -->}
</style>


http://www.ppmy.cn/server/150000.html

相关文章

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧 一、params 传参 restful风格的请求 二、Body中的form-data 传参三、Body中的raw的json格式 传参 一、params 传参 参数是会拼接到url后面的请求 场景规范&#xff1a;url后面的key值<3个参数的时候&#xff0c…

深入探讨Python正则表达式

则表达式&#xff08;Regular Expressions&#xff0c;简称 regex 或 regexp&#xff09;是一种强大的文本处理工具&#xff0c;可以用于搜索、匹配、替换、分割等操作。Python 的 re 模块提供了丰富的正则表达式功能。 一、正则表达式的基础知识 正则表达式是一种模式匹配工具…

VLA模型

目录 引言1. 机器人大模型面临的挑战2. 目前的数据集2.1 RT-12.2 Open X-Embedding2.3 DROID 3. 目前的VLA模型3.1 Goat3.2 RT-13.2.1 总体架构3.2.2 效果 3.3 RT-23.3.1 总体架构3.3.2 效果 3.4 RT-X3.4.1 模型效果1). RT-1-X2). RT-2-X 3.5 RT-H3.5.1 总体架构3.5.2 效果 3.6…

【机器人】控制之稳定性判定: 李雅普诺夫Lyapunov (4) 李函数设计再举例

图中的动力学方程和 Lyapunov 函数构造方式是基于能量的物理意义&#xff0c;以及该系统的特性推导出来的。以下详细解释为什么可以用图中的 Lyapunov 函数 VV 来描述该动力学方程的特性。 1. 动力学方程的意义 2. Lyapunov 函数的物理意义 3. 为什么可以用这个 Lyapunov 函数表…

PCDN加速对游戏的优势

PCDN&#xff08;Peer-to-CDN&#xff09;对游戏加速确实具有显著优势。以下是对这一观点的详细解释&#xff1a; 一、PCDN技术原理 PCDN是一种基于P2P&#xff08;Peer-to-Peer&#xff09;技术的内容分发网络&#xff0c;通过挖掘和利用边缘网络的闲置资源&#xff0c;构建一…

如何在 Docker 中查看日志?

在 Docker 中查看容器的日志是一个常见的任务&#xff0c;可以帮助你调试应用程序、监控其运行状况以及解决可能出现的问题。Docker 提供了 docker logs 命令来方便地访问容器的标准输出和标准错误流。以下是使用 docker logs 的一些基本方法和其他获取日志信息的方式&#xff…

HTML技术贴:深入理解与实践

1. 引言 HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是构建网页和网上应用的标准标记语言。它定义了网页内容的结构和意义&#xff0c;由一系列元素组成&#xff0c;这些元素告诉浏览器如何展示内容。本技术贴旨在深入探讨HTML的核心技…

读书笔记-《Redis设计与实现》(一)数据结构与对象(上)

翻开这本书&#xff0c;又一次体会到技术迭代更新之快。 这本书是基于 Redis 3.0 开发版编写的&#xff0c;截至本文编写时&#xff0c;Redis Software 版本已经来到了 7.8.2。经过多次迭代&#xff0c;Redis 底层已发生不少变化&#xff0c;因此&#xff0c;我们在学习本书时…