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

    属性名类型默认值说明
    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 数据及时更新。

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

<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.mzph.cn/pingmian/63957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MetaGPT源码 (ContextMixin 类)

目录 理解 ContextMixin什么是 ContextMixin&#xff1f;主要组件实现细节 测试 ContextMixin示例&#xff1a;ModelX1. 配置优先级2. 多继承3. 多继承重写4. 配置优先级 在本文中&#xff0c;我们将探索 ContextMixin 类&#xff0c;它在多重继承场景中的集成及其在 Python 配…

VScode、Windsurf、Cursor 中 R 语言相关快捷键设置

前言 在生物信息学数据分析中&#xff0c;R语言是一个不可或缺的工具。为了提高R语言编程效率&#xff0c;合理设置快捷键显得尤为重要。本文介绍在VSCode Windsurf Cursor 中一些实用的R语言快捷键设置&#xff0c;让非 Rstudio 的 IDE 用起来得心应手&#x1f611; 操作种…

分布式任务调度平台xxl-job源码学习

XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 官网&#xff1a;https://www.xuxueli.com/xxl-job/ github&#xff1a;https://github.com/xuxueli/xxl-…

Macbookpro M1 IDEA中安装mysql

一&#xff1a;安装与连接数据库 1. 首先在mysql中创建一个初始数据库&#xff1a;idea_db&#xff0c;如示&#xff1a; 2.打开IDEA,如果最右侧没有database窗口&#xff0c;则在插件那里下载“Database navigator”,稍后重启一下即可&#xff1b; 点击最右侧Database---->…

leetcode 3264. K 次乘运算后的最终数组 I 简单

给你一个整数数组 nums &#xff0c;一个整数 k 和一个整数 multiplier 。 你需要对 nums 执行 k 次操作&#xff0c;每次操作中&#xff1a; 找到 nums 中的 最小 值 x &#xff0c;如果存在多个最小值&#xff0c;选择最 前面 的一个。将 x 替换为 x * multiplier 。 请你…

根据契约进行分析--录像店案例研究01

Richard Mitchell 著&#xff0c;zhen_lei 译 本文包括录像店案例研究的一些片段&#xff0c;用来说明根据契约进行分析的原理。本文假定读者已经从其它渠道学习了一些关于根据契约进行分析的方法。 完整的一套模型可以写成一本书。这些选择的片段用来说明开发的某些方面&…

Linux内核结构及源码概述

参考&#xff1a;深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) Linux 是一个庞大、高效而复杂的操作系统&#xff0c;虽然它的开发起始于 Linus Torvalds 一个人&#xff0c;但随着时间的推移&#xff0c;越来越多的人加入了 Linux 的开发和对它的不断完善…

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如&#xff1a; 效果&#xff1a; 代码&#xff1a; TMPtext1.text "\u3000\u3000" "选择动作类型&#xff1a;";

单片机:实现控制LED灯亮灭(附带源码)

使用单片机控制LED灯的亮灭是一个非常基础的嵌入式应用项目&#xff0c;适合初学者学习如何操作GPIO&#xff08;通用输入输出&#xff09;端口以及如何控制外设。通过该项目&#xff0c;您可以学习如何通过按键输入、定时器控制或其他触发条件来控制LED灯的开关状态。 1. 项目…

jQuery理论

jQuery定义 jQuery是一个快速、简洁的JavaScript库&#xff0c;它能够简化HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是通过尽可能少的代码实现更多的功能&#xff0c;并且提供一种优雅的方式来处理HTML文档、处理事件、创建动画效果以及实现Ajax交互。. …

容器内部时间和Node时间不同步问题

之前在《 Docker及Kubernetes使用过程中出现的问题&#xff08;FAQ&#xff09;》中的“FAQ30 容器内部时间和Node时间不同”分享过容器内部和容器服务器之间时间不一致的问题&#xff1b;这通常会导致各种问题&#xff0c;比如日志记录、定时任务等。 问题原因&#xff1a;问…

组合模式(Composite Pattern):树形结构的优雅处理方案

目录 1. 什么是组合模式2. 组合模式的结构3. UML类图4. 代码实现5. 常见应用场景6. 优缺点分析7. 最佳实践建议 1. 什么是组合模式 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树形结构来表现"整体-部分&…

AI开源南京分享会回顾录

AI 开源南京分享会&#xff0c;已于2024年11月30日下午在国浩律师&#xff08;南京&#xff09;事务所5楼会议厅成功举办。此次活动由 KCC南京、PowerData、RISC-Verse 联合主办&#xff0c;国浩律师&#xff08;南京&#xff09;事务所协办。 活动以“开源视角的 AI 对话”为主…

OpenCV 图像变换与处理实战

OpenCV快速通关 第一章&#xff1a;OpenCV 简介与环境搭建 第二章&#xff1a;OpenCV 图像基本操作 第三章&#xff1a;OpenCV 图像变换与处理实战 OpenCV 图像变换与处理实战 OpenCV快速通关OpenCV 图像变换与处理实战一、OpenCV 基础与图像处理概览二、图像变换理论精析三、…

Ubuntu22.04安装docker desktop遇到的bug

1. 确认已启用 KVM 虚拟化 如果加载了模块&#xff0c;输出应该如下图。说明 Intel CPU 的 KVM 模块已开启。 否则在VMware开启宿主机虚拟化功能&#xff1a; 2. 下一步操作&#xff1a; Ubuntu | Docker Docs 3. 启动Docker桌面后发现账户登陆不上去&#xff1a; Sign in | …

【深度学习入门】深度学习介绍

1.1 深度学习介绍 学习目标 目标 知道深度学习与机器学习的区别了解神经网络的结构组成知道深度学习效果特点 应用 无 区别 特征提取方面 机器学习的特征工程步骤是要靠手动完成的&#xff0c;而且需要大量领域专业知识深度学习通常由多个层组成&#xff0c;它们通常将更简…

实现按键按下(低电平)检测到下降沿

按照流程进行编程 步骤1&#xff1a; 初始化函数 包括时基工作参数配置 输入通道配置 更新中断使能 使能捕获、捕获中断及计数器 HAL_TIM_IC_Init(&ic_handle) //时基参数配置 HAL_TIM_IC_ConfigChannel(&ic_handle,&ic_config,TIM_CHANNEL_2) //输…

【Linux金典面试题(上)】41道Linux金典面试问题+详细解答,包含基本操作、系统维护、网络配置、脚本编程等问题。

大家好&#xff0c;我是摇光~&#xff0c;用大白话讲解所有你难懂的知识点 之前写了一篇关于 python 的面试题&#xff0c;感觉大家都很需要&#xff0c;所以打算出一个面试专栏。 【数据分析岗】Python金典面试题 这个专栏主要针对面试大数据岗位、数据分析岗位、数据运维等…

【Ubuntu】使用ip link工具创建虚拟局域网并配置?

&#x1f98b;&#x1f98b;&#x1f98b;如何使用ip link工具创建虚拟局域网&#xff1f; sudo ip link add link enx888bd66b7000 name enx.120 type vlan id 120 上述命令使用ip link工具在Linux系统中创建了一个新的虚拟局域网&#xff08;VLAN&#xff09;接口&#xff0c…

汽车车牌标记支持YOLO,COCO,VOC三种格式标记,4000张图片的数据集

本数据集支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式标记汽车车牌&#xff0c;无论是新能源汽车还是油车都能识别标记&#xff0c;该数据集一共包含4000张图片 数据集分割 4000总图像数 训练组 70&#xff05; 2800图片 有效集 20&#xff05; 800图片 测…