vue+element ui el-tooltip动态显示隐藏

文章讲述了在项目中遇到的表格单元格显示多行信息需求,原table组件的show-overflow-tooltip属性无法满足特定需求。作者选择了el-tooltip组件,但发现无论文字是否溢出,都会提示信息。为解决这个问题,作者通过设置el-tooltip的disabled属性实现了动态控制提示的显示和隐藏,从而达到只在文字溢出时才显示提示的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        近期在做一个项目时,遇到需要在table的单元格内展示多行信息的需求,此时table组件中的show-overflow-tooltip属性会将多行信息全部提示出来:

        源码:

        效果:

 

        而我的需求是鼠标滑过单元格内的每一行的时候,如果文字溢出,只需要提示鼠标所在行的内容,若文字未溢出,则不进行提示,显然table组件自带的这个属性是不能满足的,于是换成了el-tooltip组件,然而,效果就是不管是否文字溢出,鼠标滑过都会给出提示信息:

        源码:

 

        效果:

         所以,我们需要对el-tooltip进行一个动态的展示,通过disabled属性进行显隐控制,具体代码如下:

        源码:

 

效果:

多行,文字溢出

 

 

文字未溢出:

 

 

### 实现方案 为了实现在 Vue 项目中当内容超出容器时使用 Element UI 的 `el-tooltip` 组件显示完整文本的效果,可以创建一个自定义的封装组件。此方法不仅适用于静态内容也适合动态加载的内容。 #### 封装 Tooltip 组件示例[^1] 首先,在 Vue 项目里引入并注册 `el-tooltip` 和其他必要的依赖项。接着构建一个新的 Vue 组件用于处理逻辑判断以及样式控制: ```html <template> <div :class="['content-wrapper', { 'overflow-hidden': isOverflow }]" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> <span ref="textRef">{{ text }}</span> <el-tooltip v-if="isOverflow && showTooltip" effect="dark" placement="top-start" :disabled="!showTooltip"> <template #content>{{ text }}</template> <span class="ellipsis-text">{{ text }}</span> </el-tooltip> </div> </template> <script setup lang="ts"> import { ref, onMounted, watchEffect } from 'vue'; const props = defineProps({ text: { type: String, required: true } }); let isOverflow = ref(false); let showTooltip = ref(false); function checkOverflow() { const element = this.$refs.textRef; if (!element) return; isOverflow.value = element.scrollWidth > element.offsetWidth || element.scrollHeight > element.offsetHeight; } onMounted(() => { checkOverflow(); }) watchEffect(checkOverflow) function handleMouseEnter() { showTooltip.value = true; } function handleMouseLeave() { showTooltip.value = false; } </script> <style scoped> .content-wrapper.overflow-hidden .ellipsis-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> ``` 上述代码实现了以下功能: - 动态监测文本是否溢出其父级容器; - 当鼠标悬停于可能存在的省略号区域之上时激活工具提示框; - 只有在确实存在溢出的情况下才会渲染 `el-tooltip` 组件以提高性能。 对于 vue-seamless-scroll 插件中存在的问题,即滚动后的 DOM 复制不会携带事件监听器的情况,建议开发者考虑手动为新生成的节点绑定相应的交互行为或是寻找替代性的解决方案来确保所有实例都能正常使用 `el-tooltip` 功能[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值